vue-router2.0简单路由嵌套
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript" src="vue-router.min.js"></script>
</head>
<body>
<div >
<!-- 跳转路径 -->
<router-link to="/home">home</router-link>
<router-link to="/news">news</router-link>
<div>
<router-view></router-view>
</div>
</div>
<script type="text/javascript">
var News = {
template:`
<div>
<h3>新闻</h3>
<router-link to="/news/user">子路由</router-link>
<div><router-view></router-view></div>
</div>
`
};
var User = {
template: '<p>我是子路由</p>'
};
var Home = {
template: '<h3>主页</h3>'
};
// 配置路由
var jump = [{
path: '/home',
component: Home
}, {
path: '/news',
component: News,
// 配置子路由
children:[{
// 注意这里的path不要加反斜杠
path:'user',
component:User
}]
}, {
path: '*',
redirect: '/home'
}];
// 创建实例
var router = new VueRouter({
routes: jump
});
// 挂载实例
var app = new Vue({
el: '#box',
router: router
})
</script>
</body>
</html>我相信这个demo都能看懂，子路由的path不能加反斜杠
