vue中的路由传参

  • vue中的路由传参已关闭评论
  • 13 次浏览
  • A+
所属分类: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 参数。