vue-router,子路由,和同级多个子路由
首先App.vue有一个最顶层的router-view//App.vue<template><keep-alive><router-view/></keep-alive></template><script>export default {name: 'App'}</scrip...
·
首先App.vue有一个最顶层的router-view
//App.vue
<template>
<keep-alive>
<router-view/>
</keep-alive>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
</style>
router/index.js文件配置的意思是,当浏览器路径为/,App.vue里的router-view显示HelloWorld组件
//router/index.js
const router = new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component:HelloWorld
}
]
})
子路由,child.vue有一个子路由router-view,再创建两个组件a.vue和b.vue
//child.vue
<template>
<div class="child">
<router-link to="/a"></router-link>
<router-link to="/b"></router-link>
<router-view/>
</div>
</template>
<script>
export default {
name: 'child'
}
</script>
<style>
</style>
router/index.js文件配置的意思是,
当浏览器路径为/a,child.vue里的子路由router-view显示a组件
当浏览器路径为/b,child.vue里的子路由router-view显示b组件
默认显示a组件
//router/index.js
const router = new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component:HelloWorld
},
{
path: '/a',//路径配置和第一个children一样,表示子路由默认显示a.vue
name: 'a',
component: child,
//path: '/child',
//redirect:'/a',//或者也可以重定向到/a
children:[
{
path:'/a',
name: 'a',
component: a
},
{
path:'/b',
name: 'b',
component: b
}
]
},
]
})
同级多个子路由,child2.vue有3个子路由router-view,再创建三个组件child_a.vue,child_b.vue,child_c.vue
//child2.vue
<template>
<div class="child2">
<router-link to="/child_a"></router-link>
<router-link to="/child_b"></router-link>
<router-view/>
<router-view/ name="b">
<router-view/ name="c">
</div>
</template>
<script>
export default {
name: 'child2'
}
</script>
<style>
</style>
router/index.js文件配置的意思是,
当路径为/child_a时,默认router-view显示child_a,name为b的router-view显示child_b,name为c的router-view显示child_c
当路径为/child_b时,默认router-view显示child_c,name为b的router-view显示child_b,name为c的router-view显示child_a
默认路径为/child_a
//router/index.js
const router = new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component:HelloWorld
},
{
path: '/a',
name: 'a',
...//同上,省略
},
{
path: '/child_a', //路径配置和第一个children一样,表示默认路径为/child_a
name: 'child_a',
component: child2,
//path: '/child2',
//redirect:'/child_a', //或者也可以重定向到/child_a
children:[ //此处要配置在children里也是因为3个路由都为child2里的子路由
{
path: '/child_a', //当路径为/child_a时
components: { //这里注意是components,加s
default: child_a, //默认router-view显示child_a
b: child_b, //name为b的router-view显示child_b
c: child_c //name为c的router-view显示child_c
}
},
{
path: '/child_b',//当路径为/child_b时
components: {
default: child_c, //默认router-view显示child_c
b: child_b, //name为b的router-view显示child_b
c: child_a //name为c的router-view显示child_a
}
}
]
},
]
})
更多推荐
已为社区贡献1条内容
所有评论(0)