- 嵌套路由主要是指routes中的对应的一个路由匹配规则{}中还包含了一个children:[{}]参数,其中的[]对应的内容类似于routes;
- 场景:router-link“首页”对应的组件下面还包含了其它router-link(登陆和注册),而点击登陆和注册后又与其它的组件相对应
- 代码
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>vue-router动态路由参数params和查询参数query的使用</title>
</head>
<body>
<div id='app'></div>
<script type='text/javascript' src='node_modules/vue/dist/vue.js'></script>
<script type='text/javascript' src='node_modules/vue-router/dist/vue-router.js'></script>
<script type='text/javascript'>
let Home = {
template:`
<div>我是首页 <br/>
<router-link :to='{name:"regist"}'>注册</router-link>
<router-link :to='{name:"login"}'>登陆</router-link>
<router-view></router-view>
</div>
`
}
let Login = {
template:`
<div>
我是登陆
</div>
`
}
let Regist = {
template:`
<div>
我是注册
</div>
`
}
let router = new VueRouter({
routes:[
{
name:'home',
path:'/home',
component:Home,
// children中的path无需再添加正斜杠/
children:[
{
name:'login',
path:'login',
component:Login
},
{
name:'regist',
path:'regist',
component:Regist
}
]
}
]
})
let App = {
template:`
<div>
<router-link :to='{name:"home"}'>首页</router-link>
<router-view></router-view>
</div>
`
}
let vm = new Vue({
el:'#app',
router,
components:{
App
},
template:`
<App/>
`
})
</script>
</body>
</html>
结果:
(1)点击“首页”后,
(2)再次点击“注册”后,
(3)点击“登陆”后。因为登陆和注册对应显示的内容是在同一个router-view中,所以点击“登陆”后只显示Login组件中的内容