6-路由组件传参 or props 解耦

最新推荐文章于 2023-07-29 16:08:41 发布

Mr.LuRen

最新推荐文章于 2023-07-29 16:08:41 发布

阅读量1.4k

点赞数

分类专栏： Vue-Router 文章标签： Vue-路由组件传参 or props 解耦

本文链接：https://blog.csdn.net/weixin_41802265/article/details/86565147

版权

Vue-Router 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

本文探讨了在Vue中如何通过路由组件传参和使用props来实现组件解耦。指出使用$route会导致组件与特定路由紧密耦合，而利用props可以更灵活。提倡使用无状态props函数，并介绍了布尔模式、对象模式和函数模式在props配置中的应用，以实现组件与路由的解耦。

摘要由CSDN通过智能技术生成

路由组件传参
使用 $route 会组件与其对应路由形成高度耦合，使组件只能在特定的 URL 上使用，不灵活

路由组件设置 props
保持 props 函数为无状态的，因为它只在路由发生变化时起作用
如果需要状态来定义 props，需使用包装组件，这样 Vue 才可以对状态变化做出反应

使用 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 }           /* 为多个路由组件设置 props */
      }
    ]
  })

布尔模式: 如果 props 被设置为 true，route.params 将会被设置为组件属性

对象模式: 如果 props 是一个对象，它会被按原样设置为组件属性。当 props 是静态的时候有用

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

函数模式
创建一个函数返回 props。可以将参数转换成另一种类型，将静态值与基于路由的值结合…

  const router = new VueRouter({
    routes: [
      { 
      	path: '/search', 
      	component: SearchUser, 
      	props: (route) => ({ query: route.query.q }) 
      }
    ]
  })
  /* URL /search?q=vue 会将 {query: 'vue'} 作为属性传递给 SearchUser 组件 */