vue router嵌套路由配置规则，path赋值错误导致404问题

前端同学使用vue肯定会用到 vue-router，在开发后台管理系统时也肯定会用到嵌套路由。

那么配置嵌套路由时，一些小伙伴经常遇到奇葩问题（找不到原因的问题，都属于奇葩问题，哈哈哈哈），path写的对，使用的对，但是却自动拦截到404 上

404页面

{
    path: '/page',
    // Main  为嵌套的组件
    component: Main,
    children: [
      {
        path: '/404',
        name: '404',
        component: () =>
          import(/* webpackChunkName: "error" */ '@/layout/error.vue')
      }
    ]
  },
  {
    path: '/:pathMatch(.*)',
    redirect: '/404'
  }

第一种写法

const page = {
  path: '/index',
  name: 'index',
  component: Main,
  children: [
    {
      path: 'role',
      name: 'role',
      component: () =>
        import(
          /* webpackChunkName: "role" */ '@/views/index/role.vue'
        ),
      meta: {
        title: '角色'
      }
    }
  ]
};

export default page;


// 使用该路径
$router.push('/index/role')

// 浏览器URL
http://xxx.xxx.com/index/role ;

第二种

const page = {
  path: '/index',
  name: 'index',
  component: Main,
  children: [
    {
      path: '/index/role',
      name: 'role',
      component: () =>
        import(
          /* webpackChunkName: "role" */ '@/views/index/role.vue'
        ),
      meta: {
        title: '角色'
      }
    }
  ]
};

export default page;


// 使用该路径
$router.push('/index/role')

// 浏览器URL
http://xxx.xxx.com/index/role ;

第三种（不推荐）

const page = {
  path: '',
  name: 'index',
  component: Main,
  children: [
    {
      path: 'index/role',
      name: 'role',
      component: () =>
        import(
          /* webpackChunkName: "role" */ '@/views/index/role.vue'
        ),
      meta: {
        title: '角色'
      }
    }
  ]
};

export default page;


// 使用该路径
$router.push('/index/role')

// 浏览器URL
http://xxx.xxx.com/index/role ;

第四种（错误）

const page = {
  path: '/index',
  name: 'index',
  component: Main,
  children: [
    {
      path: '/role',
      name: 'role',
      component: () =>
        import(
          /* webpackChunkName: "role" */ '@/views/index/role.vue'
        ),
      meta: {
        title: '角色'
      }
    }
  ]
};

export default page;


// 使用该路径
$router.push('/role')

// 浏览器URL
http://xxx.xxx.com/role ;

第五种（错误）

const page = {
  path: '/index',
  name: 'index',
  component: Main,
  children: [
    {
      path: 'index/role',
      name: 'role',
      component: () =>
        import(
          /* webpackChunkName: "role" */ '@/views/index/role.vue'
        ),
      meta: {
        title: '角色'
      }
    }
  ]
};

export default page;


// 使用该路径
$router.push('/index/role')

// 浏览器URL
http://xxx.xxx.com/index/index/role ;