• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • 路由组件传参

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

    const User = {
      template: '<div>User {{ $route.params.id }}</div>'
    }
    
    const routes = [
        {
            path: '/user/:id',
            component: User,
        }
    ]
    

    替换成

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

    这样你便可以在任何地方使用该组件,使得该组件更易于重用和测试。


    布尔模式

    如果props被设置为trueroute.params将会被设置为组件props


    命名视图

    对于有命名视图的路由,你必须为每个命名视图定义props配置:

    // user.vue
    <route-view />
    <route-view name="sidebar" />
    
    const routes = [
      {
        path: '/user/:id',
        components: { default: User, sidebar: Sidebar },
        props: { default: true, sidebar: false }
      }
    ]
    


    对象模式

    props是一个对象时,它将原样设置为组件props。当props是静态的时候很有用。

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


    函数模式

    你可以创建一个函数返回props。这样你便可以将参数转换成另一种类型,将静态值与基于路由的值结合等等。

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

    URL /search?q=vue会将{query:'vue'}作为属性传递给SearchUser组件。

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