搜索文档 /

Vue导航

本指南涵盖了路由如何在一个应用程序与离子和Vue构建工作。betway东盟体育app

IonRouterOutlet 组件使用流行的 Vue路由器 引擎盖下的图书馆。通过Ionbetway东盟体育appic和Vue Router,你可以创建具有丰富页面转换的多页面应用。

你所知道的关于使用Vue路由器进行路由的所有信息都将被传递到Ionic Vue中。betway东盟体育app让我们来看看Ionic Vue应用程序的基础知识,以及路由是如何使用它的。betway东盟体育app

一个简短的报告

在阅读本指南时,你可能会注意到这些概念中的大多数都与没有离子框架的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
              
             
              
复制 复制

假设我们从 首页 Route,我们想要添加一个按钮,将我们带到 细节 路线。我们可以使用下面的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。

当你需要在outlet A中呈现内容,同时在嵌套的outlet 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 用于呈现不同的TAB视图的出口。

选项卡中的子路由

当向选项卡添加额外的路由时,你应该将它们写为同级路由,并将父选项卡作为路径前缀。下面的例子定义了 /标签/ 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 可以在同一个出口的DOM中呈现多个页面。当组件被呈现时 IonRouterOutlet 我们认为这是一个离子框架“页面”。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 实例从您的Vue应用程序。例如,您可能想知道当用户在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
               >
             
                <
               离子含量
               >
             Detail 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 :此选项添加一个散列( )到您的URL。这对于没有主机或对服务器路由没有完全控制的web应用程序很有用。搜索引擎有时会忽略散列片段,所以你应该使用 createWebHistory 如果搜索引擎优化对你的应用很重要。

  • createMemoryHistory :该选项创建基于内存的历史记录。这主要用于处理服务器端渲染(SSR)。

更多的信息

有关使用Vue路由器在Vue中路由的更多信息,请查看他们的文档 http://router.vuejs.org/

以前的
生命周期
下一个
配置
Baidu