vue-router嵌套路由
1.例子如下
2.注意
最重要的就是在父组件里面添加子组件，如下：
<router-link to="/register/tab1">tab1</router-link>
<router-link to="/register/tab2">tab2</router-link>
<!-- 子路由的占位符 -->
<router-view />
3.代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 导入js文件 -->
<script src="lib/vue_2.5.22.js"></script>
<script src="lib/vue-router_3.0.2.js"></script>
</head>
<body>
<div id="app">
<!-- 2.添加路由连接 -->
<router-link to="/user">User</router-link>
<router-link to="/register">Register</router-link>
<!--3.添加占位符 -->
<!-- 路由填充位（也叫做路由占位符） -->
<!-- 将来通过路由规则匹配到组件 会被渲染到这个位置 -->
<router-view></router-view>
</div>
<script>
var User = {
template: `<div>User组件</div>`
}
var Register = {
template: `<div>
Rgister组件
<hr/>
<router-link to="/register/tab1">tab1</router-link>
<router-link to="/register/tab2">tab2</router-link>
<!-- 子路由的占位符 -->
<router-view />`
}
var tab1 = {
template: `<div>tab1</div>`
}
var tab2 = {
template: `<div>tab2</div>`
}
var router = new VueRouter({
// router是路由规则数组
routes: [
// 每个路由规则都是一个配置对象 其中至少包含path和component两个属性
// path表示当前路由规则匹配的hash地址
// component表示当前路由对应的展示的组件
{ path: '/', redirect: '/user' },
{ path: '/user', component: User },
{
path: '/register', component: Register, children: [
{ path: '/register/tab1', component: tab1 },
{ path: '/register/tab2', component: tab2 }
]
},
]
})
new Vue({
el: '#app',
router
})
</script>
</body>
</html>