Vue 使用props为路由组件传参『详解』

Posted 2022-07-01 XianZhe_

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue 使用props为路由组件传参『详解』相关的知识，希望对你有一定的参考价值。

Vue 使用props为路由组件传参

文章目录

Vue 使用props为路由组件传参

一、使用props传参

在组件内想要获取到路由的参数，需要使用 $route.params 或 $route.query 语法获取，这两者分别对应了params，query这两种参数类型。
在组件内为获取路由参数需要大量使用到 $route，这使得组件与路由紧密耦合，只能使用特定的URL大大限制了组件的灵活性，为了解决这一问题，可以通过 props 配置来对组件进行传参，降低组件与$route的耦合度。

现在有一个顾客点餐的场景，根据路由将菜品名传入，并在页面中显示对应的价格。


    path: "/orderfood/:foods", component: 
        data() 
            return 
                food_list: new Map([
                    ["beef", 99], ["potato", 2.33], ["tomato", 3], ["banana", 8.99], ["ananas", 3.22],
                    ["cabbage", 1.99], ["durian", 109]
                ]),
            
        ,
        template: "<p>菜品价格： food_list.get($route.params.foods) </p>",

👆将上面的代码替换成下面👇


    path: "/orderfood/:foods", props: true, component: 
        data() 
            return 
                food_list: new Map([
                    ["beef", 99], ["potato", 2.33], ["tomato", 3], ["banana", 8.99], ["ananas", 3.22],
                    ["cabbage", 1.99], ["durian", 109]
                ]),
            
        ,
        props: ["foods"],
        template: "<p>菜品价格： food_list.get(foods) </p>",

这么做的好处是，允许在任何地方使用该组件，使得该组件更容易重用和测试。

二、布尔模式

在 一、使用props传参 的演示代码所使用的就是布尔模式。当 props 被设置为 true 时，route.params 将被设置为组件的 props，两者参数名（键）保持一致。


    path: "/demo/:id/:name/:title", props: true, component: 
        props: ["id", "name", "title"],
        template: "<ul><li> id </li><li> name </li><li> title </li></ul>"

三、命名视图

多个组件的话，需使用对象的方式，为每个命名视图定义 props 配置。


    path: "/demo/:id/:name/:title",
    components: default: Foo, tabBar: tabBar,
    // 对每个命名视图进行单独配置
    props: default: true, tabBar: false

Url: http://localhost:8080/demo/1/罗翔/张三一生之敌

值得注意的是，使用命名视图的话得在 <router-view></router-view> 路由视图中添加名称。

四、对象模式

直接将对象中的元素作为 prop 传递给组件，写的是什么组件将拿到什么，这对于 props 是静态的时候很有用。


	path: "/demo",
	 component: 
	     template: `<ul><li>id</li><li>name</li><li>title</li></ul>`,
	     props: ["id", "name", "title"]
	 ,
	props: id: 1, name: "张三", title: "罗翔说刑法",

五、函数模式

函数模式十分强大，在此模式下可以对 prop 进行预处理，可自定义返回参数，将 query 参数进行处理。
但不能对此模式过于依赖，像将参数类型转换这种操作应封装在组件内部，以保证组件的复用性，尽量保持 props 函数为无状态的。


    path: "/demo/:id/:name/:title",
    component: 
        template: `<ul>
            <li>id</li>
            <li>name</li>
            <li>title</li>
            <li>params</li>
            <li>details</li>
        </ul>`,
        props: ["id", "name", "title", "params", "details"]
    ,
    props: route => 
    	// 获取 params 类型参数
        const id, name, title = route.params;
        // 获取Url?号后的 query 参数
        const params = route.query;
        return params, id, name, title, details: "函数路由"
    ,

函数模式下需返回对象类型，返回对象写法与对象模式下一致

六、兼容性

模式	Vue3	Vue2
布尔模式	✅	✅
命名模式	✅	✅
对象模式	✅	✅
函数模式	✅	✅
以上均有个人进行测试得出结论，如有误还请交流指正

参考资料💕

官方手册
- vue-route 路由的匹配语法
- vue-route 路由组件传参