1x5 VueRouter - 基础 - 路由组件传参

发布于 2022年 01月 15日 10:13

VueRouter 基础教程系列 🎉

路由组件

  1. 与路由记录（路由配置项）相互映射。
  2. 被 VueRouter 的 router-view 组件渲染。

路由组件传参

使用路由组件传参的目的在于解除组件与路由器的紧密耦合关系。 当组件中只能通过 this.$route 才能获取路由信息，这便会限制了组件的灵活性，因为它只能生效与具有路由的场景中。 现在，如果路由器可以通过 props 的方式将自己的信息传递到组件内，那么路由组件将于普通的组件相对于 props 传参没有什么本质区别，与路由器的耦合关系也会大大的降低。

布尔模式

当路由配置项的 props 属性设置为 true，则 $route.params 中的值都将设置为组件的 props

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

    }
];

对象模式

当路由配置项的 props 属性值为一个对象时，这个对象就会被原样的设置为组件的 props。

const routes = [
    {
        path: '/user/:id',
        props: {
            id:'10001',
            name:'Alice'
        },
        component: {
            props: ['id', 'name'],
            template: '<div>{{id}}-{{name}}</div>'
        }

    }
];

当 props 是静态的时候很有用。

函数模式

路由配置项 props 选项的值还可以是一个方法，这用来为组件设置更灵活的 props 非常有用，例如可以将静态的 props 与路由信息中的 query、hash 等相互结合，然后传入到组件内部。

const routes = [
    {
        path: '/user/:id',
        props: (route) => {
            console.log(route)
            return { name: 'Alice', id: route.params.id, q: route.query }
        },
        component: {
            props: ['id', 'name', 'q'],
            template: '<div>{{id}}-{{name}}-{{q}}</div>'
        }

    }
];

命名视图

由于命名视图存在多个路由渲染出口（存在多组件），所以要为每一个命名视图定义 props 配置：

const routes = [
  {
    path: '/user/:id',
    components: { default: User, sidebar: Sidebar },
    props: { default: true, sidebar: false }
  }
]

推荐文章