浅析vue-router动态路由传参的区别

vue-router 动态路由传参常见方法有 query 和 params，今天我来和大家谈谈两者区别。

1.用法不同： query 用 path 来引入，params 只能用 name 来传递，不能使用 path

query 方式传参和接收参数

//传参
this.$router.push({
        path:'/xxx'
        query:{
          id:id
        }
 })
 //接收参数
this.$route.query.id

传参是 this.$router，接收参数是this.$route

$router为VueRouter实例。想要导航跳不同URL可以使用$this.router 的方法（push、go、replace）去切换路由

$route 是当前 router 跳转对象。里面可以获取 name、path、query、params 等相关信息

params 方式传参和接收参数

//传参
this.$router.push({
        name:'/xxx'
        params:{
          id:id
        }
 })
 //接收参数
this.$route.params.id

params 传参里面只能是 name，不能是 path

params 只能用 name 来引入路由，如果这里写成了 path，接收参数页面会是 undefined

展示效果：query 更像 ajax 中 get 请求（会在地址栏显示参数），而 params 更像 post 方式传递（不会在地址栏显示参数）

//query展现效果

http://localhost:8080/detail?type=0&detail=哈哈

// params展现效果

http://localhost:8080/detail

query 跟 params，前者在浏览器地址栏中显示参数，后者则不显示。

3.刷新是否丢失数据

query 刷新不会丢失 query 里面的数据
params 刷新会丢失 params 里面的数据

总结

以上所述是给大家介绍的 vue-router 中 params 和 query 的区别，希望对大家有所帮助。