深入剖析VueRouter命名-嵌套-重定向-别名
一、命名-嵌套-重定向-别名
1.命名路由
本文接着上一片笔记进行深入讨论学习
可以通过一个名称标识一个路由，这样在某些时候会显得更方便一些，特别是在链接一个路由，或者是执行一些跳转时，可以在创建Router实例时，在routes配置中给某个路由设置名称：
const routes = [{
path: '/',
component: Home,
},
{
path: '/learn',
component: () => import('./views/Learn'),
},
{
path: '/student',
component: () => import('./views/Student'),
},
{
path: '/about',
component: () => import('./views/About'),
},
{
path: '/activity',
component: () => import('./views/Activity'),
},
{
path: '/activity/academic',
component: () => import('./views/Academic'),
},
{
path: '/activity/personal',
component: () => import('./views/Personal'),
},
{
path: '/activity/download',
component: () => import('./views/Download'),
}];
要链接到一个命名路由，可以给 router-link 的 to 属性传一个对象：
// activity.vue
<template>
<div class="activity">
<router-link to="/activity/academic">学术讨论</router-link>
<router-link to="/activity/personal">个人中心</router-link>
<router-link to="/activity/download">资源下载</router-link>
</div>
</template>
2.嵌套路由
一个被 router-view 渲染的组件想要包含自己的嵌套 router-view 时，可以使用嵌套路由，如：
{
path: '/activity',
component: () => import('./views/Activity'),
children: [
{
path: '/activity/academic',
component: () => import('./views/Academic'),
},
{
path: '/activity/personal',
component: () => import('./views/Personal'),
},
{
path: '/activity/download',
component: () => import('./views/Download'),
}
],
}
经过这样的设置，在 Activity 组件中就可以使用 router-view 了。
子路由的path可以简写：
path: 'personal',
component: () => import('./views/Personal')
这样会自动将父路由的路径，拼接在子路由前，最终结果为：/activity/personal。
当访问 /activity 下的其他路径时，并不会渲染出来任何东西，如果想要渲染点什么，可以提供一个空路由：
{
path: '/activity',
children: [
{
path: '',
component: () => import('./views/Academic'),
},
],
}
如果地址过长不方便引用时书写，则可命名：
path: '/activity',
component: () => import('./views/Activity'),
children: [
{
path: 'academic',
name: 'academic',
component: () => import('./views/Academic'),
},
{
path: 'personal',
name: 'personal',
component: () => import('./views/Personal'),
},
{
path: 'download',
name: 'download',
component: () => import('./views/Download'),
}
,
{
path: '',
component: () => import('./views/Academic'),
}
]
<template>
<div class="activity">
<router-link :to="{ name: 'academic'}">学术讨论</router-link>
<router-link :to="{ name: 'personal'}">个人中心</router-link>
<router-link :to="{ name: 'download'}">资源下载</router-link>
</div>
</template>
3.重定向
按理来说，一进入社区就应该默认选中学术讨论，此时就需要重定向
重定向也是通过 routes 配置来完成，下面例子是从 /a 重定向到 /b
const router = new VueRouter({
routes: [
{
path: '/a', redirect: '/b' }
]
})
path: '/activity',
component: () => import('./views/Activity'),
redirect: 'activity/academic',
children: [
{
path: 'academic',
name: 'academic',
component: () => import('./views/Academic'),
},
{
path: 'personal',
name: 'personal',
component: () => import('./views/Personal'),
},
{
path: 'download',
name: 'download',
component: () => import('./views/Download'),
}]
重定向的目标也可以是一个命名的路由：
const router = new VueRouter({
routes: [
{
path: '/a', redirect: {
name: 'foo' }}
]
})
path: '/activity',
component: () => import('./views/Activity'),
redirect: {
name: 'academic'}
甚至是一个方法，动态返回重定向目标：
const router = new VueRouter({
routes: [
{
path: '/a', redirect: to => {
// 方法接收 目标路由 作为参数
// return 重定向的 字符串路径/路径对象
}}
]
})
path: '/activity',
component: () => import('./views/Activity'),
redirect (to) {
return {
name: 'academic',
}
},
children: [
{
path: 'academic',
name: 'academic',
component: () => import('./views/Academic'),
},
{
path: 'personal',
name: 'personal',
component: () => import('./views/Personal'),
},
{
path: 'download',
name: 'download',
component: () => import('./views/Download'),
}]
4.别名
“重定向”的意思是，当用户访问 /a时，URL 将会被替换成 /b，然后匹配路由为 /b，那么“别名”又是什么呢？
/a 的别名是 /b，意味着，当用户访问 /b 时，URL 会保持为 /b，但是路由匹配则为 /a，就像用户访问 /a 一样。
上面对应的路由配置为：
const router = new VueRouter({
routes: [
{
path: '/a', component: A, alias: '/b' }
]
})
由于根路径容易触发被选中状态的问题，所以可以利用重定向或别名进行解决
const routes = [{
path: '/',
redirect: '/home',//重定向
},
{
path: '/home',
component: Home,
alias: '/'
}]