Vue组件复用

导航 main.vue

	
		
	
	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('发送详情获取请求')
			}
		}
	}