深入剖析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: '/'
}]