vue中的路由传参 - 张拓的天空

所属分类：Web前端

摘要

路由传参的三种写法　　首先要采用编程式导航　　第一种：字符串形式　　　　this.$router.push(“/search/” + this.keyword + “?k=” + this.keyword.toUpperCase());

路由传参的三种写法

　　首先要采用编程式导航

　　第一种：字符串形式

　　　　this.$router.push("/search/" + this.keyword + "?k=" + this.keyword.toUpperCase());

　　　　路由配置中的 path 需要占位

　　第二种：模板字符串新形式

　　　　this.$router.push(`/search/${this.keyword}?k=${this.keyword.toUpperCase()}`);

　　　　路由配置中的 path 需要占位

　　第三种：对象形式

　　　　this.$router.push({name: "search", params: {kerword: this.keyword}, query: {k: this.keyword.toUpperCase()}});

　　　　需要给路由命名

注：

　　1、路由跳转传参时，对象的写法可以是 name、path 的形式，但是 path 不能和 params 一起使用

　　2、如果路由配置中存在 params 参数占位，当你不传递 params 参数时 URL 存在问题。此时可以在 path 中占位的后面加上 ? 可以让 params 可传可不传

　　3、当 params 可传可不传时传递空串可以用 || undefinde 解决

　　4、路由组件可以通过 props 传递参数。布尔值只传递 params 、对象写法可以额外传递一些如 a: 1, ...... 、函数写法可以传递 params 和 query 参数。