vueRouter 路由形式-多层嵌套与寻址
在Vue Router中,路由的路径有两种形式:相对路径和绝对路径。
- 相对路径:路由的路径不以斜杠
/
开头,例如path: 'rankinglist'
。 - 绝对路径:路由的路径以斜杠
/
开头,例如path: '/music/rankinglist'
。
当使用相对路径时,Vue Router 会将当前路径作为前缀来拼接子路由路径。例如,当当前路径为 /music
时,子路由的路径 rankinglist
会被拼接为 /music/rankinglist
。
{
path: '/music',
name: 'music',
component: () => import('@/views/Music/index.vue'),
redirect: '/music/rankinglist', // 绝对路径,直接根据根路径拼接
meta: {
menu: 'music',
},
children: [
{
path: 'rankinglist', // 相对路径,根据当前url拼接
name: 'rankinglist',
component: () => import('@/views/Music/components/RankingList.vue'),
meta: {
name: 'rankinglist',
},
},
}
而当使用绝对路径时,子路由路径会直接以根路径开始。因此,如果要访问 /music/rankinglist
,需要将其配置为绝对路径 path: '/music/rankinglist'
。
一般来说,在路由配置中,如果一个路由路径是作为父路由来使用的,应该在路径开头加上斜杠,表示该路径是绝对路径。而如果一个路由路径是作为子路由来使用的,应该在路径开头去掉斜杠,表示该路径是相对路径。
但是在某些情况下,例如当配置了路由别名时,也可以将路径开头的斜杠去掉。因此,在路由配置中,应该根据具体情况来选择是否要加上斜杠。