路由的嵌套是在本级路由字典里面添加children字段
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../util/vue-2.4.0.js"></script>
<script src="../util/vue-router-3.0.1.js"></script>
</head>
<body>
<div id="test">
<router-link to="/account">Account</router-link>
<router-link to="/account1">Account1</router-link>
<router-view></router-view>
</div>
<template id="tmp1">
<div>
<h1>this account component</h1>
<router-link to="/account/login">登录</router-link>
<router-link to="/account/register">注册</router-link>
<router-view></router-view>
</div>
</template>
<script>
// 注册模板组件
var account = {
template:"#tmp1"
}
var account1={
template:"<p>account同级组件</p>"
}
var login={
template:"<p>登录</p>"
}
var register = {
template:"<p>注册</p>"
}
//注册路由
var myrouter = new VueRouter({
routes:[
{
// 路由嵌套,在本层路由里面添加children字段,里面填写子路由的匹配.
path:"/account",
component:account,
children:[
// 子路由的path路径不要带父路由地址,而且不要以/开头,/代表根路径
{path:"login",component:login},
{path:"register",component:register}
]
},
{
path:"/account1",
component:account1
}
]
//linkActiveClass:""
})
var vm1 = new Vue({
el:"#test",
data:{},
methods:{},
created(){},
components:{},
router:myrouter
})
</script>
</body>
</html>
