路由嵌套
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/vue2.js"></script>
<script src="../js/vue-router3.js"></script>
</head>
<body>
<div id="app">
<router-link to="/zhuye">Zhuye</router-link>
<router-link to="/keji">Keji</router-link>
<router-view></router-view>
</div>
<script type="text/javascript">
const Zhuye={
template:'<h1>主页内容</h1>'
}
const Keji={
template:`
<div>
<h1>科技页面</h1>
<router-link to="/keji/tab1">Tab1</router-link>
<router-link to="/keji/tab2">Tab2</router-link>
<router-view></router-view>
</div>
`
}
const Tab1={
template:'<h1>tab1子组件内容</h1>'
}
const Tab2={
template:'<h1>tab2子组件内容</h1>'
}
const router = new VueRouter({
routes:[
{path:'/',redirect:'/zhuye'},
{path:'/zhuye',component:Zhuye},
{path:'/keji',component:Keji,children:[
{path:'/keji/tab1',component:Tab1},
{path:'/keji/tab2',component:Tab2}
]}
]
})
const vm = new Vue({
el:"#app",
router:router
})
</script>
</body>
</html>
