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

目录

• 路由组件传参
• 布尔模式
• 对象模式
• 函数模式
• 总结

路由组件传参

在组件中使用 $route 会使之与其对应路由形成高度耦合，从而使组件只能在某些特定的 URL 上使用，限制了其灵活性。

使用 props 将组件和路由解耦：

布尔模式

商品展示界面传递id的动态参数

路由配置动态参数和开启props解耦

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

效果：现在点击了每个商品之后，都能够将相应的商品id传递到详细页面。

注意：对于包含命名视图的路由，你必须分别为每个命名视图添加 props 选项

const User = {
  props: ['id'],
  template: '
User {{ id }}
'
}
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}
}

通过这个结果可以看出，对象模式只能传布尔值

如果 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
}

效果：

你可以创建一个函数返回 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 才可以对状态变化做出反应。

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。