vueRouter 路由形式-多层嵌套与寻址

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'。

一般来说，在路由配置中，如果一个路由路径是作为父路由来使用的，应该在路径开头加上斜杠，表示该路径是绝对路径。而如果一个路由路径是作为子路由来使用的，应该在路径开头去掉斜杠，表示该路径是相对路径。

但是在某些情况下，例如当配置了路由别名时，也可以将路径开头的斜杠去掉。因此，在路由配置中，应该根据具体情况来选择是否要加上斜杠。