配置Vue二级/多级路由注意事项

二级路由中path写法不同，页面中使用时写法也不一样

二级路由配置path:"/XXX"，path中带/ ，页面中使用时"/XXX"

二级路由配置path:"XXX"，path中不带/ ，页面中使用时"/一级路由/二级路由"

children上面是一级，里面是二级路由

{
    path: '/article',
    name: 'Article',
    component: () => import('@/views/layout'),
    children: [
      {
        path: 'type',
        name: 'Type',
        component: () => import('@/views/article')
      },
      {
        path: '/list',
        name: 'List',
        component: () => import('@/views/article/ArticleList.vue')
      }
    ]
  },

使用

<template>
  <div>
    <router-link to="/article/type">类型</router-link>
    <router-link to="/list">列表</router-link>
  </div>
</template>