Vue导航
本指南将介绍如何在使用Ionic和Vue构建的应用程序中实现路由。betway东盟体育app
的
IonRouterOutlet
组件使用流行的
Vue路由器
引擎盖下的图书馆。使用Ionbetway东盟体育appic和Vue Router，您可以创建具有丰富页面转换的多页面应用程序。
你所知道的关于使用Vue路由器路由的一切都延续到了Ionic Vue。betway东盟体育app让我们来看看Ionic Vue应用程序的基础，以及路由如何与之一起工作。betway东盟体育app
一个简短的报告
在阅读这篇指南的时候，你可能会注意到这些概念中的大多数都和没有Ionic Framework的Vue路由器中的概念非常相似。betway东盟体育app你的观察是正确的!betway东盟体育appIonic Vue充分利用了Vue路由器最好的部分，使Ionic Framework尽可能无缝地过渡到构建应用程序。因此，我们建议尽可能地依赖Vue路由器的特性，而不是尝试构建自己的路由解决方案。
一个简单的路线
下面是一个示例路由配置，它定义了到“/home”URL的单个路由。当你访问“/home”时，该路径渲染
主页
组件。
路由器/ index.ts
进口
｛
createRouter
，
createWebHistory
｝
从
“@betway东盟体育appionic / vue-router”
；
进口
｛
RouteRecordRaw
｝
从
“vue-router”
；
进口
主页
从
“@ /视图/ Home.vue”
；
常量
路线
：
数组
<
RouteRecordRaw
>
＝
［
｛
路径
：
' / '
，
的名字
：
“回家”
，
组件
：
主页
｝
，
］
常量
路由器
＝
createRouter
（
｛
历史
：
createWebHistory
（
过程
．
env
．
BASE_URL
）
，
路线
｝
）
；
出口
默认的
路由器
；
在应用程序的初始加载中，应用程序将渲染
主页
组件就是这里配置的。
处理重定向
如果我们想在初始负载上以不同的路径着陆呢?为此，我们可以使用路由器重定向。重定向的工作方式与典型的路由对象相同，只是包含了一些不同的键:
常量
路线
：
数组
<
RouteRecordRaw
>
＝
［
｛
路径
：
' / '
，
重定向
：
“/ home”
｝
，
｛
路径
：
“/ home”
，
的名字
：
“回家”
，
组件
：
主页
｝
，
］
在我们的重定向中，我们寻找应用程序的索引路径。然后如果我们加载那个，我们重定向到
首页
路线。
选择不同的路线
这一切都很好，但一个人实际上如何导航到一个路线?对于这个，我们可以使用
router-link
财产。让我们创建一个新的路由设置:
常量
路线
：
数组
<
RouteRecordRaw
>
＝
［
｛
路径
：
' / '
，
重定向
：
“/ home”
｝
，
｛
路径
：
“/ home”
，
的名字
：
“回家”
，
组件
：
主页
｝
，
｛
路径
：
' /细节'
，
的名字
：
“细节”
，
组件
：
DetailPage
｝
］
假设我们从
首页
路由，我们想要添加一个按钮把我们带到
细节
路线。我们可以使用以下HTML导航到
细节
路线:
<
ion-button
router-link
＝
＂
/细节
＂
>
去详细
ion-button
>我们也可以通过使用路由器API在我们的应用程序中编程导航:
<
模板
>
<
ion-page
>
<
离子含量
>
<
ion-button
@click
＝
＂
() = > router.push(/明细)
＂
>
去详细
ion-button
>
离子含量
>
ion-page
>
模板
>
<
脚本
朗
＝
＂
ts
＂
>
进口
｛
IonButton
，
IonContent
，
IonPage
｝
从
“@betway东盟体育appionic / vue”
；
进口
｛
defineComponent
｝
从
“vue”
；
进口
｛
useRouter
｝
从
“vue-router”
；
出口
默认的
defineComponent
（
｛
的名字
：
“主页”
，
组件
：
｛
IonButton
，
IonContent
，
IonPage
｝
，
设置
（
）
｛
常量
路由器
＝
useRouter
（
）
；
返回
｛
路由器
｝
；
｝
｝
）
脚本
>这两个选项提供相同的导航机制，只是适合不同的用例。
延迟加载的路线
我们当前设置路由的方式使它们在加载应用程序时包含在相同的初始块中，这并不总是理想的。相反，我们可以设置路由，以便组件在需要时被加载:
常量
路线
：
数组
<
RouteRecordRaw
>
＝
［
｛
路径
：
' / '
，
重定向
：
“/ home”
｝
，
｛
路径
：
“/ home”
，
的名字
：
“回家”
，
组件
：
主页
｝
，
｛
路径
：
' /细节'
，
的名字
：
“细节”
，
组件
：
（
）
= >
进口
（
“@ /视图/ DetailPage.vue”
）
｝
］
这里，我们的设置和之前一样，只是这一次
DetailPage
已替换为导入调用。这将导致
DetailPage
组件不再是应用程序加载时请求的块的一部分。
共享url与嵌套路由
在设置路由时，一个常见的混淆点是在共享url或嵌套路由之间做出决定。本部分将解释这两种方法，并帮助您决定使用哪一种。
共享url
共享URL是一种路由配置，其中路由具有公共的URL片段。配置共享URL的示例如下:
常量
路线
：
数组
<
RouteRecordRaw
>
＝
［
｛
路径
：
' /仪表盘'
，
组件
：
DashboardMainPage
，
｝
，
｛
路径
：
仪表板/统计的
，
组件
：
DashboardStatsPage
｝
］
；
上述路由被认为是“共享的”，因为它们重用了
指示板
URL的一部分。
嵌套的路线
嵌套路由是一种路由配置，将路由作为其他路由的子路由列出。嵌套路由配置示例如下:
常量
路线
：
数组
<
RouteRecordRaw
>
＝
［
｛
路径
：
“仪表板/:id”
，
组件
：
DashboardRouterOutlet
，
孩子们
：
［
｛
路径
：
＇＇
，
组件
：
DashboardMainPage
｝
，
｛
路径
：
“统计数据”
，
组件
：
DashboardStatsPage
｝
，
］
｝
］
；
上面的路由是嵌套的，因为它们在
孩子们
父路由的数组。注意，父路由呈现
DashboardRouterOutlet
组件。当你嵌套路由时，你需要渲染另一个实例
ion-router-outlet
．
我该选哪一个?
当您想要从页面A过渡到页面B，同时在URL中保留两个页面之间的关系时，共享URL是很好的选择。在我们前面的例子中，一个按钮
/仪表盘
Page可以转换到
仪表板/统计数据
页面。保留两个页面之间的关系是因为a)页面转换和b) url。
当你需要在出口A中呈现内容，同时也需要在嵌套出口b中呈现子内容时，嵌套路由非常有用。最常见的用例是制表符。当你加载一个标签离子启动程序，你会看到betway东盟体育app
ion-tab-bar
而且
ion-tabs
第一个渲染的组件
ion-router-outlet
．的
ion-tabs
组件呈现另一个
ion-router-outlet
它负责呈现每个选项卡的内容。
在移动应用程序中，嵌套路由很少有意义。如果有疑问，请使用共享URL路由配置。我们强烈警告不要在标签以外的上下文中使用嵌套路由，因为它会很快让你的应用导航混乱。
使用标签
当使用标签时，Ionic Vue需要一种方法来知betway东盟体育app道哪个视图属于哪个标签。的
IonTabs
组件在这里会派上用场，但让我们看看它的路由设置是什么样的:
常量
路线
：
数组
<
RouteRecordRaw
>
＝
［
｛
路径
：
' / '
，
重定向
：
/标签/ tab1的
｝
，
｛
路径
：
“/标签/”
，
组件
：
选项卡
，
孩子们
：
［
｛
路径
：
＇＇
，
重定向
：
“tab1”
｝
，
｛
路径
：
“tab1”
，
组件
：
（
）
= >
进口
（
“@ /视图/ Tab1.vue”
）
｝
，
｛
路径
：
“tab2”
，
组件
：
（
）
= >
进口
（
“@ /视图/ Tab2.vue”
）
｝
，
｛
路径
：
“tab3”
，
组件
：
（
）
= >
进口
（
“@ /视图/ Tab3.vue”
）
｝
］
｝
］
在这里,我们
选项卡
路径加载一个
选项卡
组件。我们将每个选项卡作为路由对象提供给
孩子们
数组中。在本例中，我们调用路径
选项卡
，但这可以定制。
我们先来看看我们的
选项卡
组件:
<
模板
>
<
ion-page
>
<
离子含量
>
<
ion-tabs
>
<
ion-router-outlet
>
ion-router-outlet
>
<
ion-tab-bar
槽
＝
＂
底
＂
>
<
ion-tab-button
选项卡
＝
＂
tab1
＂
href
＝
＂
/标签/ tab1
＂
>
<
ion-icon
:图标
＝
＂
三角形
＂
/>
<
ion-label
>
标签1
ion-label
>
ion-tab-button
>
<
ion-tab-button
选项卡
＝
＂
tab2
＂
href
＝
＂
/标签/ tab2
＂
>
<
ion-icon
:图标
＝
＂
椭圆
＂
/>
<
ion-label
>
选项卡2
ion-label
>
ion-tab-button
>
<
ion-tab-button
选项卡
＝
＂
tab3
＂
href
＝
＂
/标签/ tab3
＂
>
<
ion-icon
:图标
＝
＂
广场
＂
/>
<
ion-label
>
选项卡3
ion-label
>
ion-tab-button
>
ion-tab-bar
>
ion-tabs
>
离子含量
>
ion-page
>
模板
>
<
脚本
朗
＝
＂
ts
＂
>
进口
｛
IonTabBar
，
IonTabButton
，
IonTabs
，
IonContent
，
IonLabel
，
betway东盟体育appIonIcon
，
IonPage
，
IonRouterOutlet
｝
从
“@betway东盟体育appionic / vue”
；
进口
｛
椭圆
，
广场
，
三角形
｝
从
“betway东盟体育appionicons /图标”
；
出口
默认的
｛
的名字
：
“标签”
，
组件
：
｛
IonContent
，
IonLabel
，
IonTabs
，
IonTabBar
，
IonTabButton
，
betway东盟体育appIonIcon
，
IonPage
，
IonRouterOutlet
｝
，
设置
（
）
｛
返回
｛
椭圆
，
广场
，
三角形
，
｝
｝
｝
脚本
>
如果你以前使用过Ionic Framework，betway东盟体育app你应该会对它感到熟悉。我们创建一个
ion-tabs
组件，并提供
ion-tab-bar
．的
ion-tab-bar
提供了
ion-tab-button
组件，每一个都有一个
选项卡
属性，该属性与路由器配置中的相应选项卡相关联。我们还提供
ion-router-outlet
给
ion-tabs
用于呈现不同选项卡视图的outlet。
标签内的子路由
当添加额外的路由到制表符时，你应该用父制表符作为路径前缀将它们写为兄弟路由。下面的示例定义
/标签/ tab1 /视图
路由作为
/标签/ tab1
路线。由于这个新路由具有
tab1
前缀，它将被呈现在
选项卡
组件中，Tab 1仍然会被选中
ion-tab-bar
．
常量
路线
：
数组
<
RouteRecordRaw
>
＝
［
｛
路径
：
' / '
，
重定向
：
/标签/ tab1的
｝
，
｛
路径
：
“/标签/”
，
组件
：
选项卡
，
孩子们
：
［
｛
路径
：
＇＇
，
重定向
：
“tab1”
｝
，
｛
路径
：
“tab1”
，
组件
：
（
）
= >
进口
（
“@ /视图/ Tab1.vue”
）
｝
，
｛
路径
：
“tab1 /视图”
，
组件
：
（
）
= >
进口
（
“@ /视图/ Tab1View.vue”
）
｝
，
｛
路径
：
“tab2”
，
组件
：
（
）
= >
进口
（
“@ /视图/ Tab2.vue”
）
｝
，
｛
路径
：
“tab3”
，
组件
：
（
）
= >
进口
（
“@ /视图/ Tab3.vue”
）
｝
］
｝
］IonRouterOutlet
的
IonRouterOutlet
组件提供了一个容器来呈现视图。它和
RouterView
在其他Vue应用程序中发现的组件
IonRouterOutlet
可以在同一个outlet中呈现DOM中的多个页面。中呈现组件时
IonRouterOutlet
我们认为这是一个Ionic Framework“页面betway东盟体育app”。路由器出口容器控制页面之间的转换动画，以及页面创建和销毁的时间。这有助于在视图之间来回切换时维护它们之间的状态。
里面不应该提供任何东西
IonRouterOutlet
当在模板中设置时。而
IonRouterOutlet
可以嵌套在子组件中，我们警告它，因为它通常会使应用程序中的导航混乱。看到
共享url与嵌套路由
为更多的信息。
IonPage
的
IonPage
组件将每个视图包装在Ionic Vue应用程序中，并允许页面转换betway东盟体育app和堆栈导航正常工作。使用路由器导航到的每个视图必须包含一个
IonPage
组件。
<
模板
>
<
ion-page
>
<
ion-header
>
<
ion-toolbar
>
<
ion-title
>
首页
ion-title
>
ion-toolbar
>
ion-header
>
<
离子含量
类
＝
＂
ion-padding
＂
>
你好世界
离子含量
>
ion-page
>
模板
>
<
脚本
朗
＝
＂
ts
＂
>
进口
｛
IonContent
，
IonHeader
，
IonPage
，
IonTitle
，
IonToolbar
｝
从
“@betway东盟体育appionic / vue”
；
进口
｛
defineComponent
｝
从
“vue”
；
出口
默认的
defineComponent
（
｛
组件
：
｛
IonContent
，
IonHeader
，
IonPage
，
IonTitle
，
IonToolbar
｝
｝
）
；
脚本
>
组件通过提出
IonModal
或
IonPopover
一般不需要
IonPage
组件，除非您需要包装器元素。在这种情况下，我们建议使用
IonPage
这样组件的尺寸仍然是正确计算的。
访问IonRouter实例
可能有一些用例需要访问
IonRouter
实例。例如，你可能想知道当用户在Android上按硬件返回按钮时，你是否在应用程序的根页面。对于这样的用例，您可以注入
IonRouter
对组件的依赖:
进口
｛
useIonRouter
｝
从
“@betway东盟体育appionic / vue”
；
.．.
出口
默认的
｛
设置
（
）
｛
常量
ionRouter
＝
useIonRouter
（
）
；
如果
（
ionRouter
．
canGoBack
（
）
）
｛
//执行一些操作
｝
｝
｝URL参数
让我们扩展原来的路由示例，展示如何使用URL参数:
常量
路线
：
数组
<
RouteRecordRaw
>
＝
［
｛
路径
：
' / '
，
重定向
：
“/ home”
｝
，
｛
路径
：
“/ home”
，
的名字
：
“回家”
，
组件
：
主页
｝
，
｛
路径
：
“/细节/:id”
，
的名字
：
“细节”
，
组件
：
DetailPage
｝
］
注意，我们现在已经添加了
: id
到我们的尽头
细节
路径字符串。URL参数是路由路径的动态部分。当用户导航到URL时，例如
/细节/ 1
“1”被保存到一个名为“id”的参数中，当路由呈现时，该参数可以在组件中访问。
让我们看看如何在我们的组件中使用它:
<
模板
>
<
ion-page
>
<
ion-header
>
<
ion-toolbar
>
<
ion-title
>
细节
ion-title
>
ion-toolbar
>
ion-header
>
<
离子含量
>
详细ID: {{ID}}
离子含量
>
ion-page
>
模板
>
<
脚本
朗
＝
＂
ts
＂
>
进口
｛
IonContent
，
IonHeader
，
IonPage
，
IonTitle
，
IonToolbar
｝
从
“@betway东盟体育appionic / vue”
；
进口
｛
defineComponent
｝
从
“vue”
；
进口
｛
useRoute
｝
从
“vue-router”
；
出口
默认的
defineComponent
（
｛
的名字
：
“细节”
，
组件
：
｛
IonContent
，
IonHeader
，
IonPage
，
IonTitle
，
IonToolbar
｝
，
设置
（
）
｛
常量
路线
＝
useRoute
（
）
；
常量
｛
id
｝
＝
路线
．
参数个数
；
返回
｛
id
｝
；
｝
｝
）
脚本
>
我们的
路线
变量包含当前路由的一个实例。它还包含我们传入的任何参数。我们可以得到
id
参数并将其显示在屏幕上。
路由器的历史
Vue路由器提供了一种可配置的历史模式。让我们看看不同的选项，以及为什么您可能想要使用每一个选项。
createWebHistory:该选项创建HTML5历史记录。它利用History API实现URL导航，而无需重新加载页面。这是单页应用程序最常见的历史记录模式。如果有疑问，就使用createWebHistory．createWebHashHistory:该选项添加一个散列(＃)到你的网址。这对于没有主机或不能完全控制服务器路由的web应用程序非常有用。搜索引擎有时会忽略散列片段，所以您应该使用createWebHistory相反，如果SEO对你的应用很重要。createMemoryHistory:该选项创建基于内存的历史记录。这主要用于处理服务器端渲染(SSR)。
更多的信息
要了解更多关于在Vue中使用Vue路由器路由的信息，请查看他们的文档 http://router.vuejs.org/ ．
