作用:
刚打开一个页面时,是默认进入“/”的页面,重定向可以进入指定页面。
实现一:刚打开页面进入login页面;
routes: [
{
path: '/',
redirect: "/login",
},
{
path: 'login',
name: 'Login',
component: () => import('../views/Login.vue'),
meta: {isMain: true, title: mainTitle}
},
{
path: "error",
name: "Error",
component: () => import('../views/Error.vue'),
meta: {isMain: true, title: mainTitle}
},
]
进一步:刚打开页面显示的是Main.vue,在里面配置RouterView
展示子路由,因为路由重定向redirect所以会展示login子路由,所以刚打开页面由"头部+login内容
"组成;
routes: [
{
path: '/',
name: 'Main',
component: Main,
redirect: "/login",
children: [
{
path: 'login',
name: 'Login',
component: () => import('../views/Login.vue'),
meta: {isMain: true, title: mainTitle}
},
{
path: "error",
name: "Error",
component: () => import('../views/Error.vue'),
meta: {isMain: true, title: mainTitle}
},
]
}
]
Main.vue
<template>
<div class="main">
<div class="header">这是头部</div>
<div class="content">
<RouterView></RouterView>
</div>
</div>
</template>
实现二:不使用重定向默认展示login页面
routes: [
{
path: '/',
name: 'Login',
component: () => import('../views/Login.vue'),
meta: {isMain: true, title: mainTitle}
},
{
path: "error",
name: "Error",
component: () => import('../views/Error.vue'),
meta: {isMain: true, title: mainTitle}
},
]