时间戳

首页 > 解决方案 > 在 Ionic Vue 应用程序中使用选项卡时导航到不同路线的问题

javascript - 在 Ionic Vue 应用程序中使用选项卡时导航到不同路线的问题

问题描述

我是一位经验丰富的前端开发人员，但我对 Ionic 很陌生，所以请原谅我提出了一个愚蠢的问题。

我正在使用 Ionic-Vue 创建一个移动应用程序。

我从标签默认模板开始。我可以毫无问题地在选项卡之间切换：每个选项卡都有一个关联的路由和组件，并且当我切换选项卡时会立即显示正确的组件。

现在来解决问题。

我正在尝试为登录屏幕添加一个新的路由/组件。我希望登录屏幕位于选项卡系统之外，因此我将其作为顶级路由“/login”及其相关组件。我在第一个选项卡上添加了一个新按钮以便登录，这是代码。

<ion-button href="/login">LOGIN</ion-button>

但是当我按下按钮时，整个页面重新加载需要更多的时间来切换组件，然后当我浏览不同的选项卡时。在我看来，它没有使用内部路由器，而是更改了页面的实际 URL，导致整个应用程序再次被请求到服务器。我认为这与我使用选项卡默认模板这一事实有关，也许如果您使用选项卡，您就不能拥有独立的路由？

这是我的路由表：

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    redirect: '/tabs/home'
  },
  {
    path: '/tabs/',
    component: Tabs,
    children: [
      {
        path: '',
        redirect: 'home'
      },
      {
        path: 'home',
        component: () => import('@/views/Home.vue')
      },
      {
        path: 'tab1',
        component: () => import('@/views/Tab1.vue')
      },
      {
        path: 'tab2',
        component: () => import('@/views/Tab2.vue')
      },
      {
        path: 'tab3',
        component: () => import('@/views/Tab3.vue')
      }
    ]
  },
  {
    path: '/login',
    component: () => import('@/views/Login.vue'),
  }
]

谢谢！

标签： javascriptvue.jsionic-frameworkvue-routerionic-vue

解决方案

您应该使用 arouter-link来引导路由器：

<router-link to="/login">
   <ion-button>LOGIN</ion-button>
</router-link>

该to对象具有各种配置选项。如果你的路由有一个 name 属性name: 'login'，你也可以通过这种方式访问​​它，这在模板中可以更清晰地获得更长的路由路径：

<router-link :to="{ name: 'login' }">
   <ion-button>LOGIN</ion-button>
</router-link>

推荐阅读