路由重定向：redirect

作用：

刚打开一个页面时，是默认进入“/”的页面，重定向可以进入指定页面。
实现一：刚打开页面进入login页面；

1. routes: [
2.         {
3.             path: '/',
4.             redirect: "/login",
5.         },
6.         {
7.              path: 'login',
8.              name: 'Login',
9.              component: () => import('../views/Login.vue'),
10.              meta: {isMain: true, title: mainTitle}
11.          },
12.          {
13.              path: "error",
14.              name: "Error",
15.              component: () => import('../views/Error.vue'),
16.              meta: {isMain: true, title: mainTitle}
17.          },
18.     ]

复制代码

进一步：刚打开页面显示的是Main.vue，在里面配置RouterView展示子路由，因为路由重定向redirect所以会展示login子路由，所以刚打开页面由"头部+login内容"组成；

1. routes: [
2.         {
3.             path: '/',
4.             name: 'Main',
5.             component: Main,
6.             redirect: "/login",
7.             children: [
8.                 {
9.                     path: 'login',
10.                     name: 'Login',
11.                     component: () => import('../views/Login.vue'),
12.                     meta: {isMain: true, title: mainTitle}
13.                 },
14.                 {
15.                     path: "error",
16.                     name: "Error",
17.                     component: () => import('../views/Error.vue'),
18.                     meta: {isMain: true, title: mainTitle}
19.                 },
20.             ]
21.         }
22.     ]

复制代码

Main.vue

1. <template>
2.   <div class="main">
3.           <div class="header">这是头部</div>
4.     <div class="content">
5.         <RouterView></RouterView>
6.     </div>
7.   </div>
8. </template>

复制代码

实现二：不利用重定向默认展示login页面

1. routes: [
2.         {
3.             path: '/',
4.             name: 'Login',
5.              component: () => import('../views/Login.vue'),
6.              meta: {isMain: true, title: mainTitle}
7.         },
8.         {
9.             path: "error",
10.             name: "Error",
11.             component: () => import('../views/Error.vue'),
12.             meta: {isMain: true, title: mainTitle}
13.         },
14.    ]

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。