您当前的位置： 首页 > 学无止境 > JS经典实例 网站首页JS经典实例
嵌套路由（子路由）
发布时间：2020-03-02 00:15:45编辑：雪饮阅读（）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript" src="./node_modules/vue-router/dist/vue-router.js"></script>
<script type="text/javascript">
Vue.use(VueRouter);
var song={
data:function(){
return{}
},
template:`<div>我是song组件</div>`,
created(){
console.log("this.$route",this.$route);
console.log("this.$router",this.$router);
}
};
var home={
data:function(){
return{}
},
template:` <div>
首页内容
<br />
<router-link to = '/home/song'>歌曲</router-link>
<router-link to = '/home/movie'>电影</router-link>
<router-view></router-view>
</div>`,
created(){
}
};
var movie={
data:function(){
return{}
},
template:`<div>我是movie组件</div>`,
created(){
console.log("this.$route",this.$route);
console.log("this.$router",this.$router);
}
};
var router=new VueRouter({
routes:[
{
path:"/home",
name:"home",
component:home,
children:[
{
path:'song',
name:'song',
component:song
},
{
path:'movie',
name:'movie',
component:movie
}
]
}
]
});
var App = {
template:`<div class='app'>
<router-link :to ="{name:'home'}">首页</router-link>
<router-view></router-view>
</div>`,
};
//挂载路由对象
new Vue({
el: '#app',
router:router,
template: `<App />`,
components:{App}
});
</script>
</body>
</html>
关键字词：vue,嵌套路由,子路由