1、路由嵌套
routes:[ { path:'/account', component:account, children:[ {path: '/login',component: login}, {path: '/register',component: register}, ] }
2、案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--cdn镜像快速导入Vue包-->
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.1.3/vue-router.js"></script>
</head>
<body>
<div id="app">
<router-link to="/account">Account</router-link>
<router-view></router-view>
</div>
<template id="tmp">
<div>
<h1>这是account组件</h1>
<router-link to="/login">登陆</router-link>
<router-link to="/register">注册</router-link>
<router-view></router-view>
</div>
</template>
<script>
var account = {
template:'#tmp'
}
var login = {
template:'<h1>登陆</h1>'
}
var register = {
template:'<h1>注册</h1>'
}
var router = new VueRouter({
routes:[
{
path:'/account',
component:account,
children:[
{path: '/login',component: login},
{path: '/register',component: register},
]
}
]
})
//2.创建一个vue实例
var vm = new Vue({
el: '#app', //表示当前我们new的这个Vue实例，要控制页面上的哪个区域
data: {},
methods:{},
router
});
</script>
</body>
</html>