如一级路由A,B,C
二级路由A/1,A/2,A/3
当点击二级路由A/3 的时候出现路由地址是A/A/3 的问题
const router = new VueRouter({
// routes 是一个数组,作用 hash 地址与组件之间的映射关系
routes: [{
path: '/home',
component: Home
}, {
path: '/movie',
component: Movie
}, {
path: '/about',
component: About,
children: [{
path: 'tab1',
component: Tab1,
name: 'tab1'
}, {
path: 'tab2',
component: Tab2,
name: 'tab2'
}]
}]
})
About 中包含二级路由如下图
原因是
<router-link to="about/tab1">Tab1</router-link>
to 的路径部分要以/ 开头
正确的是
<router-link to="/about/tab1">Tab1</router-link>
<router-link to="/about/tab2">Tab2</router-link>