vuewatch修改对象的值（Vue中watch监听路由变化）
相同的组件，根据路由的变化，展示不同的数据，
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="./node_modules/vue-router/dist/vue-router.js"></script>
div id="app">
<router-link to="/home">首页</router-link>
<router-link to="/pins">沸点</router-link>
<router-view></router-view>
</div>
<script>
Vue.use(VueRouter);
var Home={
template:`
<div>
<router-link :to="{name:'comDesc',params:{id:'frontend'}}">前端</router-link>
<router-link :to="{name:'comDesc',params:{id:'backend'}}">后端</router-link>
<router-view></router-view>
</div>
`
}
var Pins={
template:`
<div>我是沸点内容</div>
`
}
var comDesc={
template:`<div>我是{{msg}}</div>`,
data(){
return {
msg:"frontend"
}
},
watch:{
'$route'(to,from){ //去哪里 from从哪里来
console.log(to);
console.log(from);
this.msg=to.params.id;
}
}
}
var router=new VueRouter({
routes:[
{
path:"/home",
name:"home",
component:Home,
children:[
{
path:"/home/:id",
name:"comDesc",
component:comDesc
}
]
},
{
path:'/pins',
name:"pins",
component:Pins
}
]
})
new Vue({
el:"#app",
router:router,
})
</script>
免责声明：本文仅代表文章作者的个人观点，与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺，请读者仅作参考，并自行核实相关内容。文章投诉邮箱：anhduc.ph@yahoo.com
