zoukankan      html  css  js  c++  java
  • 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('发送详情获取请求')
    			}
    		}
    	}
    
  • 相关阅读:
    自我介绍
    最大连通子数组求和
    敏捷开发方法综述
    第四周学习进度条
    时间日志和缺陷日志
    最大子数组2.0
    最大子数组1.0
    第三周学习进度条
    小学四则运算3.0
    单元测试
  • 原文地址:https://www.cnblogs.com/angfl/p/Vue_router_route.html
Copyright © 2011-2022 走看看