Vue Router 的params和query传参的使用区别

最新推荐文章于 2024-12-12 17:17:57 发布

原创最新推荐文章于 2024-12-12 17:17:57 发布 · 236 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍Vue.js中通过路由进行参数传递的方法，包括使用name和path方式跳转，并演示了params和query两种参数传递方式及其接收过程。

1·params传递参数（使用 name 跳转）

//$router : 是路由操作对象，只写对象
//$route : 路由信息对象，只读对象

//操作 路由跳转
this.$router.push({
      name:'one',
      params:{
          name:'pendy',
          age:'11'
     }
})

//读取 路由参数接收
this.name = this.$route.params.name;
this.age = this.$route.params.age;

2·query传递参数（使用 path 跳转，前面要加 "/"）

//query传参，使用path跳转
this.$router.push({
    path:'/second',
    query: {
        queryId:'20180822',
        queryName: 'query'
    }
})

//query传参接收
this.queryName = this.$route.query.queryName;
this.queryId = this.$route.query.queryId;