Vue组件复用

组件复用 - router变化 导致请求只发生一次

导航 main.vue

	<div v-for='c in list'>
		<div @click='onClick(c)'></div>
	<div>
	export default{
		data(){
			return{
				list:[
					{name:'ddd',price:9999},					{name:'cccc',price:9999}
					]
			}
		},
		methods:{
			onClick(c){
				this.$router.push({
					name:"detail",
					params:{name:c.name}
				})
			}
		}
	}

detail.vue

	create(){
		console.log('发送详情获取请求');//只执行一次,需求是要每次切换路由到详情页都要执行
	}

route.js

	{
		path:'/main'
		name:'/main',
		component:()= import('../views/Main.vue'),
		children:[
			{
				path:'/main/course/:name',
				name:'detail',
				component:()=> import('../views/Detail.vue')
			}
		]
	}

修改detail.vue 增加watch监听route变化

	watch:{
		$route:{
			immediate:true,//初始化就执行一次
			handle(){
				console.log('发送详情获取请求')
			}
		}
	}
原文地址:https://www.cnblogs.com/angfl/p/Vue_router_route.html