vue 中的动态传参和query传参
Vue router 如何传参
params、query 是什么?
- params:
/router1/:id
,这里的 id 叫做 params。例如/router1/123, /router1/789 - query:/router1?id=123,这里的 id 叫做 query。例如/router1?id=456
query 方式传参和接收参数
传参: this.$router.push({ path:'/xxx' query:{ id:id } }) this.$router.push 传参时, 并不会引起页面刷新。需要重新请求数据,代码如下。
<div>shopName:{{shop.shopName}}</div>
export default{
data(){
return {
shop:{shopName:"shopName"},
shopNo:"123"
};
},
mounted(){
// 初始时加载店铺数据
this.loadShop();
},
watch:{
// shopNo改变时重新加载
shopNo:function(newShopNo){
this.loadShop();
}
},
methods:{
loadShop(){
// 调用API获取shop数据
var shop = {/*获取到的数据*/};
this.shop=shop;
}
}
}
接收参数: this.$route.query.id
params 方式传参和接收参数
params 传参 路由界面: router.js: 路由设置这里,当你使用 params 方法传参的时候,要在路由后面加参数名,并且传参的时候,参数名要跟路由后面设置的参数名对应。使用 query 方法,就没有这种限制,直接在跳转里面用就可以 传参: this.$router.push({ name:'xxx' params:{ id:id } }) 接收参数: this.$route.params.id
注意:如果路由上面不写参数,也是可以传过去的,但不会在 url 上面显示出你的参数,并且当你跳到别的页面或者刷新页面的时候参数会丢失(如下图所示),那依赖这个参数的 http 请求或者其他操作就会失败。
query 传参和 params 传参的区别
- 用法上的: query 要用 path 来引入,params 要用 name 来引入,接收参数都是类似的,分别是 this.$route.query.name 和 this.$route.params.name。注意接收参数的时候,已经是$route 而不是$router 了哦!!
- 展示上的: query 更加类似于我们 ajax 中 get 传参,params 则类似于 post,说的再简单一点,前者在浏览器地址栏中显示参数,后者则不显示所以两者不能同时使用!!!
router-link 和编程式导航两种跳转方式
通过 router-link 我们可以向路由到的组件传递参数,这在我们实际使用中时非常重要的。
编程式导航
- router.push
- router.replace 和 router.push()不同,使用 router.replace()会将一个访问记录 push 到 url 中,所以再退回了的时候一定会回到这里,而 router.replace()不是添加一个新的进入,而是替换栈顶元素,这样,在返回的时候,就会返回到栈顶元素的下面一个。
router.go
- 在浏览器记录中前进一步,等同于 history.forward() router.go(1)
- 后退一步记录,等同于 history.back() router.go(-1)
动态传参之坑
注意:params 传参,push 里面只能是 name:'xxxx',不能是 path:'/xxx',因为 params 只能用 name 来引入路由,如果这里写成了 path,接收参数页面会是 undefined!!!
vue 中的动态传参和query传参相关推荐
- vue给html动态添加属性,Vue中怎么动态添加类名?
能够向组件添加动态类名是非常强大的功能.它使我们可以更轻松地编写自定义主题,根据组件的状态添加类,还可以编写依赖于样式的组件的不同变体. 添加动态类名与在组件中添加 prop :class=" ...
- @query传参_vue-router中params传参和query传参的区别及处理方法
在 Vue 实例内部,你可以通过 $router 访问路由实例.因此你可以调用 this.$router.push 想要导航到不同的 URL,则使用 router.push 方法.这个方法会向 his ...
- vue中定时器一般用法,定时器函数传参以及清除定时器
一.vue中定时器一般用法(举个例子) 显示当前时间, setInterval()方法会每秒执行一次函数,类似手表功能: <template><div class="use ...
- Vue中实现动态路由
展示效果: 1.简单配置一个动态路由: 我们经常需要把某种模式匹配到的所有路由,全都映射到同个组件.例如,我们有一个展示商品的组件,对于所有 上架状态 各不相同的商品,都要使用这个组件来渲染.那么,我 ...
- Ant design vue中实现动态更换主题色
一.创建vue项目 可视化创建步骤:cmd调出窗口,输入vue ui,自动在浏览器上打开新窗口 输入文件名 ,文件名最好是英文 然后进行配置功能, 根据需求选择配置功能 这里最好选择2.0版本, 可以 ...
- vue中使用动态添加路由(router.addRoutes)加载权限侧边栏的两种方式
工作中我们经常会遇到这种需求,后台定义用户的权限数据,前端进行获取,并渲染在侧边栏导航上,不同权限的用户看到的侧边栏是不同的.即前端渲染的数据是随着后台的改变而改变的,做到真正的前后端分离. 一.拿到 ...
- Vue中使用vue-croper插件实现图片上传裁剪并传到SpringBoot后台接口
场景 前后端分离的项目,前端修改头像时,需要对头像进行裁剪并且能实时预览,然后上传到SpringBoot后台. 实现效果如下 注: 博客: https://blog.csdn.net/badao_li ...
- vue中如何动态的绑定图片
分类: vue(5) 版权声明:本文为博主原创文章,未经博主允许不得转载. 在项目中遇到需要动态的改变图片路径,图片路径并非是从后台获取过来的数据. 因此在data中必须用require加载,否则 ...
- Vue中使用微信JSDK实现图片上传
1.npm安装,不会的看这里 npm install weixin-js-sdk 2.main.js全局注册 import wx from 'weixin-js-sdk' Vue.prototype. ...
最新文章
- windows下编译jsoncpp 1.y.z
- 网络相关之TCP(有趣的对话)
- MySQL查询的进阶操作--连接查询
- 生产环境子域降级记录
- Visifire中图表的导出
- POJ 2251 Dungeon Master
- 江苏成教计算机统考操作题多少分,江苏省成人计算机统考试题,操作题.doc
- 【OpenCV 例程200篇】96. 谐波平均滤波器
- 是以微型计算机为中心 配以相应的外围设备,______是以微型计算机为中心,配以相应的外围设备、电源和辅助电路,以及指挥微型计算机工作的系统软件而构成的。...
- 设计模式之抽象状态模式
- FileZilla Server使用实践
- 诚之和:极地冰川融化会将远古病原体释放出来吗?
- JMETER-清除cookies
- 防弹玻璃为啥会被钢球砸碎?这就是一道高中物理题!
- 项目经理职业生涯的五道坎
- 十五个闭目养神、调养身心的方法
- Html网页设计-美食网站
- 黑莓管理器6.0_BlackBerry Java SDK 7.0 Beta发布
- pwn-进阶-forgot
- nas服务器硬盘,明明白白了解NAS:网络存储服务器浅析(转载)
热门文章
- python 虚拟环境创建
- Python学习---Django的基础操作180116
- 一步一步学Vue(四)
- c# 如何在webbrowser控件执行一段JS代码
- 文件加密及解密openssl
- Spring DI模式 小样例
- linux cifs windows 慢,windows上使用dockerIO特别慢有没有更优的解决方案?
- 如何使处于不同局域网的计算机实现远程通信_小区自来水二次加压泵站远程监控系统方案...
- 退出登录后点返回键 是登录状态_看了这50条登录的测试点,你还敢说测试很容易吗...
- layui内置loading等待加载