二级路由中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>