有学有练才叫学习:学而不思则罔,思而不学则殆:学而不习,纸上谈兵,习而不进,画地为牢!

Vue watch 路由(Vue中watch监听路由变化)实现方式

vue 炮渣日记 4周前 (11-12) 16次浏览 已收录 0个评论 扫描二维码
相同的组件,根据路由的变化,展示不同的数据,

<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>
Vue watch 路由(Vue中watch监听路由变化)实现方式

Vue watch 路由(Vue中watch监听路由变化)实现方式
喜欢 (0)
炮渣日记
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址