在 Ionic Vue 应用程序中使用选项卡时导航到不同路线的问题
Issues navigating to different routes when using tabs in Ionic Vue app
我是一名经验丰富的前端开发人员,但我对 Ionic 还很陌生,所以请原谅我问了一个愚蠢的问题。
我正在使用 Ionic-Vue 创建移动应用程序。
我从选项卡默认模板开始。我可以毫无问题地在选项卡之间切换:每个选项卡都有一个关联的路由和组件,当我切换选项卡时会立即显示正确的组件。
现在进入正题。
我正在尝试为登录屏幕添加一个新的 route/component。 我希望登录屏幕位于选项卡系统之外,所以我将其作为顶级路由“/login”及其关联组件。
为了登录,我在第一个选项卡上添加了一个新按钮,这是代码。
<ion-button href="/login">LOGIN</ion-button>
但是当我按下按钮时,整个页面重新加载花费更多时间来切换组件,然后当我浏览不同的选项卡时。
在我看来,它没有使用内部路由器,而是改变了页面的实际 URL,导致整个应用程序再次被请求到服务器。
我认为这与我使用的选项卡默认模板有关,也许如果你使用选项卡你就不能有独立的路由?
这是我的路线table:
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'),
}
]
谢谢!
您应该使用 router-link
来引导路由器:
<router-link to="/login">
<ion-button>LOGIN</ion-button>
</router-link>
to
对象有多种配置选项。如果您的路线有一个名称 属性,例如 name: 'login'
,您也可以通过这种方式访问它,对于更长的路线路径,这在模板中会更清晰:
<router-link :to="{ name: 'login' }">
<ion-button>LOGIN</ion-button>
</router-link>
除了Dan的回答,注意你也可以使用<ion-button>
的router-link
属性:
<ion-button router-link="/login">LOGIN</ion-button>
为了获得最佳体验,请记住在您想导航到另一条路线时使用 router-link
(组件或属性)而不是 href
。
或者,您可以使用 <ion-button>
的 router-link
属性,像这样:
<ion-button :router-link="{ name: 'login'}">Login</ion-button>
我是一名经验丰富的前端开发人员,但我对 Ionic 还很陌生,所以请原谅我问了一个愚蠢的问题。
我正在使用 Ionic-Vue 创建移动应用程序。
我从选项卡默认模板开始。我可以毫无问题地在选项卡之间切换:每个选项卡都有一个关联的路由和组件,当我切换选项卡时会立即显示正确的组件。
现在进入正题。
我正在尝试为登录屏幕添加一个新的 route/component。 我希望登录屏幕位于选项卡系统之外,所以我将其作为顶级路由“/login”及其关联组件。 为了登录,我在第一个选项卡上添加了一个新按钮,这是代码。
<ion-button href="/login">LOGIN</ion-button>
但是当我按下按钮时,整个页面重新加载花费更多时间来切换组件,然后当我浏览不同的选项卡时。 在我看来,它没有使用内部路由器,而是改变了页面的实际 URL,导致整个应用程序再次被请求到服务器。 我认为这与我使用的选项卡默认模板有关,也许如果你使用选项卡你就不能有独立的路由?
这是我的路线table:
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'),
}
]
谢谢!
您应该使用 router-link
来引导路由器:
<router-link to="/login">
<ion-button>LOGIN</ion-button>
</router-link>
to
对象有多种配置选项。如果您的路线有一个名称 属性,例如 name: 'login'
,您也可以通过这种方式访问它,对于更长的路线路径,这在模板中会更清晰:
<router-link :to="{ name: 'login' }">
<ion-button>LOGIN</ion-button>
</router-link>
除了Dan的回答,注意你也可以使用<ion-button>
的router-link
属性:
<ion-button router-link="/login">LOGIN</ion-button>
为了获得最佳体验,请记住在您想导航到另一条路线时使用 router-link
(组件或属性)而不是 href
。
或者,您可以使用 <ion-button>
的 router-link
属性,像这样:
<ion-button :router-link="{ name: 'login'}">Login</ion-button>