Vue路由组件传参

路由组件传参在组件中使用 $route 会使之与其对应路由形成高度耦合，从而使组件只能在某些特定的 URL 上使用，限制了其灵活性 路由变化时获取路由参数需要watch监听$route.params或$route.query,书写比较麻烦 路由属...

路由组件传参

在组件中使用 $route 会使之与其对应路由形成高度耦合，从而使组件只能在某些特定的 URL 上使用，限制了其灵活性
路由变化时获取路由参数需要watch监听$route.params或$route.query,书写比较麻烦
路由属性传值有三种模式

1.布尔模式

如果 props 被设置为 true，route.params 将会被设置为组件属性。
注意：要在组件中配置props，否则即使设置为true直接取值是取不到的

router.js路由配置

{
    path: '/app/:msg',
    name: 'app',
    // props: true, // 这里添加props属性并且设置为true
    meta: '',
    component: () => import('views/otherModuleFile/kybH5/loanRenewal/detailPage/test.vue'),
},

test.vue页面配置

export default {
    name: 'test',
    props: ['msg'],
    mounted() {
      console.log(this.msg, this.$route.params, this.$props);
    },
  };

// 访问url:
"http://localhost:2333/#/app/123"

console.log(this.msg, this.$route.params, this.$props);
// 没有配置属性，props: []，打印结果
undefined, {msg: "123"}, undefined
// 配置后，props: ['msg']，打印结果
123, {msg: "123"}, {msg: "123"}

2.对象模式

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

router.js路由配置

{
    path: '/app/:msg',
    name: 'app',
    props: { msg: '456' }, // 静态路由
    meta: '',
    component: () => import('views/otherModuleFile/kybH5/loanRenewal/detailPage/test.vue'),
},

// 访问url:
"http://localhost:2333/#/app/123"

console.log(this.msg, this.$route.params, this.$props);

// 打印结果
456, {msg: "123"}, {msg: "456"}

问题：params可以被设置为组件的属性，那么想把query的值设置为props可以吗？

答案是可以的

3.函数模式

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

router.js路由配置

{
    path: '/app/:msg',
    name: 'app',
    // 函数式props，接受一个参数，为当前的route对象
    props: route => ({ query: route.query.q, msg: route.params.msg, staticMsg: route.meta.pageName }),
    meta: '',
    component: () => import('views/otherModuleFile/kybH5/loanRenewal/detailPage/test.vue'),
},

test.vue页面配置

export default {
    name: 'test',
    props: ['msg', 'staticMsg', 'query'],
    mounted() {
      console.log(this.query, this.msg, this.staticMsg, this.$route.params);
    },
};
// 访问url:
"http://localhost:2333/#/app/123?q=456"
// 打印结果
456, 123, 测试页面, {msg: "123"}

总结：

在路由配置中设置props作用是用来传递数据，与$route对象解耦

• props设置为true，就可以把route.params设置为属性 
• 静态的props可用于配置一些常量 
• 动态的props可以自由组合来自$route.params和$route.query中的值

参考资料：[https://router.vuejs.org/zh/guide/essentials/passing-props.html]