vue-router中query和params的区别解析
更新时间：2022年10月18日 14:34:33 作者：坚强的小蚂蚁
vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用，这篇文章主要介绍了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区别内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
本文给大家分析下vue2.0几个重要的与自己目前项目相关的变化，也是vue2.0不可忽视的变化，非常不错，具有参考借鉴价值，感兴趣的朋友一起看看吧2016-09-09
这篇文章主要介绍了vue项目如何通过url链接引入其他系统页面问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
这些年写前端vue时经常碰到虚拟DOM这个单词，但都是听到就算了，左耳进右耳出，知道有这么个东西就完了，因为感觉也没有影响我实现公司的产品业务逻辑。今天在这里想花点时间探讨下虚拟DOM相关的知识，给自己补补课2022-10-10
vuex是vue的状态管理模式，主要可以解决父子组件嵌套层数较多，或者兄弟组件之间需要维护同一个状态的情况。下面这篇文章主要给大家介绍了关于学习vuex的相关资料，需要的朋友可以参考学习，下面来一起看看吧。2017-04-04
在 Vue 3 中,如果你想监听 reactive 对象中的某个属性发生的变化,你可以使用 watch 函数进行监听,watch 函数允许你观察 reactive 对象的某个属性或者整个对象,所以本文给大家介绍了Vue3监听reactive对象中属性变化的方法,需要的朋友可以参考下2024-08-08
这篇文章主要介绍了vue+swiper实现左右滑动的测试题功能,本文通过实例代码给大介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-10-10
这篇文章主要介绍了详解vuejs之v-for列表渲染，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-06-06
用vue做的项目,有个需求就是关闭浏览器的时候,需要往后台提交有个接口,来看看这个账号有没有下线,这篇文章主要给大家介绍了关于vue项目使用js监听浏览器关闭、刷新、后退事件的实现方法,需要的朋友可以参考下2024-06-06
这篇文章介绍了Vue.js中v-show和v-if指令的用法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-03-03
这篇文章主要给大家介绍了关于如何基于Vue-cli快速搭建项目的完整步骤，文中通过示例代码以及图片将搭建的步骤一步步介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2018-11-11
最新评论