vue-router中query和params的区别解析

认识vue-router

目前前端流行的三大框架，都有自己的路由实现：

• Angular的ngRouter
• React的ReactRouter
• Vue的vue-router

vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。
我们可以访问其官方网站对其进行学习：https://router.vuejs.org/zh/

vue-router是基于路由和组件的

• 路由用户设定访问路径的，将路径和组件映射起来。
• 在vue-router的单页面应用中，页面的路径的改变就是组件的切换

一. query和params的知识点理解

/data/:id这个路由匹配/data/1,/data/2这里的 id 叫 params

/data?id=1 /data?id=2 这里的 id 叫 query

params方法传参时，要在路由后面加参数名，并且传参时，参数名要跟路由后面设置的参数名对应。
query方法，就没有这种限制，直接在跳转里面用就可以。

二. query和params的使用方法

1.使用params传参，路由配置的时候path要带上动态参数

{
   path: '/detail/:id/',
   name: "detail",
   component: detail//这个details是传进来的组件名称
 }
 
使用： 
方法1：<router-link :to="{ name: 'details', params: { id: 123 }}">点击按钮</router-link>
方法2：this.$router.push({name:'details',params:{id:123}})
页面url显示结果是：http://localhost:8081/#/details/123

params跳转方式：

• 注意：如果提供了 path，params 会被忽略，所以可以使用以下两种方式：
• 写法一：this.$router.push('/detail/${this.$route.params.id}')
• 写法二：this.$router.push({name:'detail',params:{id:123}})

2. 使用query传参，路由配置的时候path不用带参数

{
   path: '/detail',//这里不需要参入参数，参见上面的params写法
   name: "detail",
   component: detail//这个details是传进来的组件名称
 }
 
使用： 
方法1：<router-link :to="{ name: 'details', query: { id: 123 }}">点击</router-link>
方法2：this.$router.push({name:'details',query:{id:123}})
 
方法3：<router-link :to="{ path: 'details', query: { id: 123 }}">点击</router-link>
方法4：this.$router.push({path:'details',query:{id:123}})
页面url显示结果是：http://localhost:8081/#/details?id=123

query跳转方法：

• 写法一：this.$router.push('/detail?id=${this.$route.query.id}');
• 写法二：this.$router.push({path:'detail',query:{id:123}})

3. 要是想获取参数值：各自的获取方法是：

query和params分别是：this.$route.query.id，this.$route.params.id

三. query和params在浏览器地址的显示方式

params在浏览器地址栏中不显示参数名称
http://47.107.171.252:8001/#/detail/123456

query在浏览器地址栏中显示参数名称
http://47.107.171.252:8001/#/detail?id=123456

到此这篇关于vue-router中query和params的区别 的文章就介绍到这了,更多相关vue-router query和params区别内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！