您当前的位置： 首页 > 学无止境 > JS经典实例 网站首页JS经典实例
动态路由
发布时间：2020-03-02 00:16:33编辑：雪饮阅读（）
<!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{
watchS:"",
createS:'',
}
},
template:`<div>我是song组件watchS:<span style="color:red">{{watchS}}</span> createS:<span style="color:red">{{createS}}</span></div>`,
created(){
//第一次挂载时候可以获取参数
console.log("this.$route",this.$route);
console.log("this.$router",this.$router);
this.createS=this.$route.params.id;
},
watch:{
//也可以监听改变时也可以获取
'$route'(to,from){
console.log("to",to);
this.watchS=to.params.id;
}
}
};
var home={
data:function(){
return{}
},
template:` <div>
<router-link :to ="{name:'song',params:{id:'andorid'}}" >song-android</router-link>
<router-link :to ="{name:'song',params:{id:'frontend'}}">song-frontend</router-link>
<router-view></router-view>
</div>`,
created(){
}
};
var router=new VueRouter({
routes:[
{
path:"/home",
name:"home",
component:home,
children:[
{
path:'/home/song/:id',
name:'song',
component:song
}
]
}
]
});
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,动态路由
上一篇：嵌套路由（子路由）
下一篇：路由权限(路由守卫)