Vue路由传参props解耦的三种方式小结
目录
- 路由组件传参
- 布尔模式
- 对象模式
- 函数模式
- 总结
路由组件传参
在组件中使用 $route
会使之与其对应路由形成高度耦合,从而使组件只能在某些特定的 URL 上使用,限制了其灵活性。
使用 props
将组件和路由解耦:
布尔模式
商品展示界面传递id的动态参数
<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>
路由配置动态参数和开启props解耦
{ 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>
效果:现在点击了每个商品之后,都能够将相应的商品id传递到详细页面。
注意:对于包含命名视图的路由,你必须分别为每个命名视图添加 props
选项
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>
通过这个结果可以看出,对象模式只能传布尔值
如果 props
是一个对象,它会被按原样设置为组件属性。当 props
是静态的时候有用。
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>
效果:
你可以创建一个函数返回 props
。
这样你便可以将参数转换成另一种类型,将静态值与基于路由的值结合等等。
const router = new VueRouter({ routes: [ { path: '/search', component: SearchUser, props: route => ({ query: route.query.q }) } ] })
URL /search?q=vue
会将 {query: 'vue'}
作为属性传递给 SearchUser
组件。
请尽可能保持 props
函数为无状态的,因为它只会在路由发生变化时起作用。
如果你需要状态来定义 props
,请使用包装组件,这样 Vue 才可以对状态变化做出反应。
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。
赞 (0)