Vue Router 嵌套路由中, 子路由path路径带 ‘/‘ 与不带的区别

嵌套路由配置路由规则，使用children配置项：

import Vue from 'vue'
import VueRouter from 'vue-router'
import PageView from '@/layouts/PageView'
import TabsView from '@/layouts/tabs/TabsView'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    component: TabsView,
    children: [
      {
        path: '/baseInfo',
        component: PageView,
        children: [
          {
            path: 'home',
            component: () =>
              import('@/pages/baseInfo/home/index.vue'),
          },
          {
            path: '/about',
            component: PageView,
            children: [
              {
                path: '/music',
                component: () =>
                  import(
                    '@/pages/baseInfo/about/music/index.vue'
                  ),
              },
              {
                path: 'video',
                component: () =>
                  import(
                    '@/pages/baseInfo/about/video/index.vue'
                  ),
              },
            ],
          },
        ],
      },
    ],
  },
]

const router = new VueRouter({
  mode: 'history',
  base: '/app/',
  publicPath: './',
  routes,
})

export default router

区别:

不带 / ：

1、当 baseInfo 的子路由 home 定义的路径 path 没有书写 / ，则 $router.push 跳转路径为：

$router.push('/baseInfo/home')

浏览器地址栏显示: http:xxxxxxxxxx/app/baseInfo/home

2、当 baseInfo 的子路由 about 定义 path 有书写 / ，而它的子路由 video 在定义 path 没有书写 / ,则 $router.push 跳转路径为：

$router.push('/about/video')

浏览器地址栏显示: http:xxxxxxxxxx/app/about/video

带 / :

3、当 baseInfo 的子路由 about 定义 path 前有书写 / ，而它的子路由 music 在定义 path 有书写 / ,则 $router.push 跳转路径为：

$router.push('/music')

浏览器地址栏显示:http:xxxxxxxxxx/app/music

总结：

父级有/子级有/

url只写子级 http://localhost:8080/children 子路由写了/代表绝对路径

父级有/子级没/

url要写父级/子级 http://localhost:8080/parent/childre 子路由没有写/代表的拼接的路径

父级有没有/好像无吊所谓主要看子级，路由跳转同理