Vue路由传参props解耦的三种方式小结

<template>
    <div class="home">
        <TabBar></TabBar>
        <p>这是首页</p>
        <ul>
            <li v-for="(item ,index) in goods" :key="item.id">
                <!-- <router-link :to="{path:'/detail',query:{item}}"> -->
                <router-link :to="{name:'Detail',params:{id:index}}">
                    <p><img :src="item.path" ></p>
                    <p>{{item.name}}</p>
                    <p>{{item.price}}</p>
                </router-link>
            </li>
        </ul>
    </div>
</template>

{
    path:'/detail/:id',
    name:'Detail',
    component:()=> import ('../views/Detail.vue'),
    props:true
}

<template>
	<div class="detail">
		<p>这是详细页</p>
		<p>{{id}}</p>
	</div>
</template>
<script>
	export default{
		name:'Detail',
		props:['id'],//注意props要和data(){}是同一级的
		data(){
			return{
			
			}	
		}
	}
</script>

const User = {
  props: ['id'],
  template: '<div>User {{ id }}</div>'
}
const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User, props: true },

    // 对于包含命名视图的路由，你必须分别为每个命名视图添加 `props` 选项：
    {
      path: '/user/:id',
      components: { default: User, sidebar: Sidebar },
      props: { default: true, sidebar: false }
    }
  ]
})

{
    path:'/detail/:id',
    name:'Detail',
    component:()=> import ('../views/Detail.vue'),
    // props:route=>({params:route.params.id})
    props:{id:true}
}

<template>
	<div class="detail">
		<p>这是详细页</p>
		<p>{{id}}</p>		
	</div>
</template>
<script>
	export default{
		name:'Detail',
		props:['id'],
		data(){
			return{
					
			}	
		}
	}
</script>

const router = new VueRouter({
  routes: [
    {
      path: '/promotion/from-newsletter',
      component: Promotion,
      props: { newsletterPopup: false }
    }
  ]
})

{
        path:'/detail/:id',
        name:'Detail',
        component:()=> import ('../views/Detail.vue'),
		props:route=>({params:route.params.id})//如果使用的是query传参则改为query
}

<template>
	<div class="detail">
		<p>这是详细页</p>
		<p>{{params}}</p>
		
	</div>
</template>

<script>
	export default{
		name:'Detail',
		props:['params'],
		data(){
			return{
				
			}	
		}
	}
</script>

const router = new VueRouter({
  routes: [
    {
      path: '/search',
      component: SearchUser,
      props: route => ({ query: route.query.q })
    }
  ]
})