在这里插入图片描述

『精』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: "函数路由"}
    },
}

在这里插入图片描述

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


六、兼容性

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

参考资料💕


相关博客🍗

Logo

前往低代码交流专区

更多推荐