Vue.js - 路由 vue-router 的使用详解8(重定向、alias别名)
一、重定向
1,基本用法
(1)默认情况下,刚进入应用时都是进到“/”这个路由,我们可以通过重定向使得直接进入到“/step2”
import Vue from 'vue' import Router from 'vue-router' import step1 from '@/components/step1' import step2 from '@/components/step2' import step3 from '@/components/step3' Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'step1', component: step1, redirect: '/step2' }, { path: '/step2', name: 'step2', component: step2 }, { path: '/step3', name: 'step3', component: step3 } ] })
(2)可以看到一进来就直接跳转到“/step2”

2,重定向时可以传递参数
export default new Router({ routes: [ { path: '/', name: 'step1', component: step1, redirect: '/step2/:userId(\\d+)/:token' }, { path: '/step2', name: 'step2', component: step2 } ] })
3,重定向的目标也可以是一个命名的路由
export default new Router({ routes: [ { path: '/', name: 'step1', component: step1, redirect: { name: 'step2' } }, { path: '/step2', name: 'step2', component: step2 } ] })
4,动态返回重定向目标
export default new Router({ routes: [ { path: '/', name: 'step1', component: step1, redirect: to => { return "/step2" } }, { path: '/step2', name: 'step2', component: step2 } ] })
二、alias 别名
1,基本用法
(1)我们可以在路由配置文件里给路径起一个别名。
export default new Router({ routes: [ { path: '/', name: 'step1', component: step1 }, { path: '/step2', name: 'step2', component: step2, alias:'/alias2' } ] })
(2)接着我们就可以使用这个别名来访问这个路由路径。
<router-link to="/alias2">下一步</router-link>
(3)可以看到不管是“/step2”还是“/alias2”,它们访问的结果都是一样的。

2,每个路径可以同时配置多个别名
export default new Router({ routes: [ { path: '/', name: 'step1', component: step1 }, { path: '/step2', name: 'step2', component: step2, alias: ['/alias2', '/hangge'] } ] })
3,重定向到别名上
export default new Router({ routes: [ { path: '/', name: 'step1', component: step1, redirect: '/alias2' }, { path: '/step2', name: 'step2', component: step2, alias: '/alias2' } ] })