浅析vue-router中params和query的区别
1.引入方式不同
query要用path来引入
this.$router.push({ path: 'test', query: { type: 2, detail: '哈哈' } })
params要用name来引入
this.$router.push({ name: 'test', query: { type: 2, detail: '哈哈' } })
2.url不同
query在url中显示参数
http://localhost:8080/detail?type=0&detail=哈哈
params在url中不显示参数
下面整理一下这两者的差别:
1、用法上的
刚才已经说了,query要用path来引入,params要用name来引入,接收参数都是类似的,分别是this.$route.query.name和this.$route.params.name。
注意接收参数的时候,已经是$route而不是$router了哦!!
2、展示上的
query更加类似于我们ajax中get传参,params则类似于post,说的再简单一点,前者在浏览器地址栏中显示参数,后者则不显示
query:
params:
总结
以上所述是小编给大家介绍的vue-router中params和query的区别,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
相关推荐
-
vue params、query传参使用详解
最近在学习Vue,本文介绍了vue params.query传参使用,分享给大家,也给自己留个笔记 声明式:<router-link :to="..."> 编程式:router.push(...) 这两种方式 都可以实现跳转链接,在上篇文章继续,通过A组件跳转链接到B组件并且传参数. 1.router.push使用 router/index.js export default new Router({ routes: [ { path: '/', name: 'A', co
-
Vue中正确使用jQuery的方法
题主Vue小白,入门demo时想在其中使用jQuery(当然可能是不推荐的做法哈,毕竟俩儿的风格不一样,但万一你就需要呢 _^ ^_),结果遇到问题,最终倒腾解决. 编译报错:$ is undefined or no-undef '$' is not defined 假设你已经使用vue-cli搭建好了开发的脚手架,接下来,看下面. 1.NPM 安装 jQuery,项目根目录下运行以下代码 npm install jquery --save 2.webpack配置 在项目根目录下的build目录
-
浅析vue-router jquery和params传参(接收参数)$router $route的区别
今天做项目时踩到了vue-router传参的坑(jquery和params),所以决定总结一下二者的区别. 1.jquery方式传参和接收参数 传参: this.$router.push({ path:'/xxx' query:{ id:id } }) 接收参数: this.$route.query.id 注意:传参是this.$router,接收参数是this.$route,这里千万要看清了!!! this.$router 和this.$route有何区别? 在控制台打印两者可以很明显的看出两
-
vue router使用query和params传参的使用和区别
写在前面: 传参是前端经常需要用的一个操作,很多场景都会需要用到上个页面的参数,本文将会详细介绍vue router 是如何进行传参的,以及一些小细节问题.有需要的朋友可以做一下参考,喜欢的可以点波赞,或者关注一下,希望可以帮到大家. Vue router如何传参 params.query是什么? params:/router1/:id ,/router1/123,/router1/789 ,这里的id叫做params query:/router1?id=123 ,/router1?id=456
-
详解vue嵌套路由-params传递参数
在嵌套路由中,父路由向子路由传值除了query外,还有params,params传值有两种情况,一种是值在url中显示,另外一种是值不显示在url中. 1.显示在url中 index.html <div id="app"> <!-- router-view 路由出口, 路由匹配到的组件将渲染在这里 --> <router-view></router-view> </div> main.js params传值是通过 :[参数值]
-
详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
使用vue-cli构建的vue项目,webpack的配置文件是分散在很多地方的,而我们需要修改的是build/webpack.base.conf.js,修改两处的代码 // 在开头引入webpack,后面的plugins那里需要 var webpack = require('webpack') // resolve module.exports = { // 其他代码... resolve: { extensions: ['', '.js', '.vue'], fallback: [path.j
-
浅析vue-router中params和query的区别
1.引入方式不同 query要用path来引入 this.$router.push({ path: 'test', query: { type: 2, detail: '哈哈' } }) params要用name来引入 this.$router.push({ name: 'test', query: { type: 2, detail: '哈哈' } }) 2.url不同 query在url中显示参数 http://localhost:8080/detail?type=0&detail=哈哈 p
-
关于Vue Router中路由守卫的应用及在全局导航守卫中检查元字段的方法
#在切换路由时,组件会被复用,不过,这也意味着组件的生命周期钩子不会再被调用. 解决办法有两种,1简单地 watch (监测变化) $route 对象: const User = { template: '...', watch: { '$route' (to, from) { // 对路由变化作出响应... } } } 2.使用 2.2 中引入的 beforeRouteUpdate 导航守卫: const User = { template: '...', beforeRouteUpdate
-
Vue Router中应用中间件的方法
中间件是我们在软件开发中的一个古老而强大的概念,当我们在应用程序中使用路由相关模式时,它非常有用. 如果您不太了解中间件的含义,Nodejs框架Express里的中间件可以帮助您了解它们的工作原理. 但是,中间件仅适用于后端吗? 不,当应用程序中有路由时,中间件在前端或后端中就会非常常见.比如现在流行的单页应用程序. 有一些示例可以说明,何时可以使用中间件: 不允许未登录用户访问您的网页. 仅允许某些类型的用户查看页面(角色:管理员,作者等) 数据采集. 重置设置或清理存储空间. 限制访问用户的
-
vue如何通过params和query传值(刷新不丢失)
目录 vue通过路由传值 一. 通过query传递参数刷新不丢失参数 二. 通过params传递参数刷新不丢失参数 三. 同时使用params和query传递参数刷新不丢失参数 总的来说 vue通过路由传值 在许多跳转的同时需要完成携带参数,并且在刷新的同时不丢失参数. $router:是路由操作对象,只写对象 $route:路由信息对象,只读对象 一. 通过query传递参数刷新不丢失参数 在需要传值的页面: this.$router.push({ path: '/tasks',//通过pat
-
浅析Vue项目中使用keep-Alive步骤
vue 2.1.0之前,实现方式: 1 /router/index.js 配置路由元信息keepAlive: true { path: "user", name: "用户管理", component: User, meta: { requireAuth: true, keepAlive: true // 用户列表需要被缓存 } }, 2 /app.vue <keep-alive> <router-view v-if="$route.met
-
深入浅析Vue.js中 computed和methods不同机制
在vue.js中,有methods和computed两种方式来动态当作方法来用的 1.首先最明显的不同 就是调用的时候,methods要加上() 2.我们可以使用 methods 来替代 computed,效果上两个都是一样的,但是 computed 是基于它的依赖缓存,只有相关依赖发生改变时才会重新取值. 而使用 methods ,在重新渲染的时候,函数总会重新调用执行 为了方便理解,先上一段源码 <!DOCTYPE html> <html> <head> <m
-
深入浅析Vue.js 中的 v-for 列表渲染指令
1 基本用法 当遍历一个数组或枚举一个对象进行迭代循环展示时,就会用到列表渲染指令 v-for. 它的表达式需要结合 in 来使用,类似 item in items 的形式. 1.1 遍历数组 html: <div id="app"> <ul> <li v-for="n in news">{{n.title}}</li> </ul> </div> js: <script> var a
-
浅析Vue.js 中的条件渲染指令
1 应用于单个元素 Vue.js 中的条件渲染指令可以根据表达式的值,来决定在 DOM 中是渲染还是销毁元素或组件. html: <div id="app"> <p v-if="type===1">拌面</p> <p v-else-if="type===2">扁肉</p> <p v-else="type===3">其它</p> </div
-
浅析Vue.js中v-bind v-model的使用和区别
v-model 指令在表单控件元素上创建双向数据绑定,所谓双向绑定,指的就是我们在js中的vue实例中的data与其渲染的dom元素上的内容保持一致,两者无论谁被改变,另一方也会相应的更新为相同的数据 最基础的就是实现一个联动的效果 <body> <div class="app"> <span>Multiline message is:</span> <p>{{message}}</p> <br> &l
-
深入浅析Vue全局组件与局部组件的区别
1.组件声明 <!-- 全局组件模板father模板 --> <template id="father"> <div> <h3>这是{{name}}</h1> <div> <p>这是{{data}}</p> </div> </div> </template> var FATHER = { template: "#father", dat
随机推荐
- ajax分页查询详解
- IE 浏览器安全级别详情及区别小结
- hibernate存取json数据的代码分析
- Python 获得13位unix时间戳的方法
- Asp.Net网站优化系列之数据库的优化措施与索引优化方法
- Python判断直线和矩形是否相交的方法
- Android 拍照并对照片进行裁剪和压缩实例详解
- 实例展示使用Java压缩和解压缩7z文件的方法
- Java责任链模式定义与用法分析
- java使用jdbc操作数据库示例分享
- 收集json解析的四种方法分享
- Windows server 2012远程桌面会话主机和远程桌面授权
- sxs.exe病毒专杀工具之“橙色八月专杀工具.bat”
- WinForm窗体间传值的方法
- PHP源代码数组统计count分析
- 软路由还是硬路由 最合适才是好路由
- 华为交换机的后缀详解
- Python3.6安装及引入Requests库的实现方法
- 深入浅析vue组件间事件传递
- Python正则表达式中的re.S的作用详解