vue router传参_新手使用vue-router传参时注意事项
1. 使用name和params组合传参
this.$router.push({name: 'details', params: {'id': 233}})
路由配置
import Vue from 'vue'import Router from 'vue-router' Vue.use(Router) export default new Router({ mode: 'history', routes: [ { path: '/details', name: 'details', component: resolve => require(['../components/details'], resolve) } ]})
获取参数
this.$route.params.id // 233
刷新参数丢失 显示 undefined
this.$route.params.id // undefined
注意:此方法第一次跳转是没有问题的,参数也可以传过去,但是刷新页面后,参数就没了 (ps: 这个地方其实还有一个问题,当你传递的参数是number类型,第一次是没有问题的,获取的时候也是number类型,但是当你刷新页面后,number变成string类型,如果涉及计算的建议先类型转换一下)
第一次是预期结果 // 234
console.log(this.$route.params.id + 1)
刷新页面后直接字符串拼接了 // 2331
参数丢失解决方案:
routes: [ { path: '/details/:id', // 这里配置的要和你传递的参数名保持一致 name: 'details', component: resolve => require(['../components/details'], resolve) } ]
2. path和query组合传参
this.$router.push({path: '/details', query: {id: 666}})
this.$route.query.id // 666
此方法参数会跟在问号后面 例如:/details?id=666,该方法刷新页面不会丢失参数
最后:根据自己的项目选择合适的传参方式
官方文档vue-router(https://router.vuejs.org/zh/)
学习从来不是一个人的事情,要有个相互监督的伙伴,想要学习或交流前端问题的小伙伴可以私信“学习”小明加群获取2019web前端最新入门资料,一起学习,一起成长!
vue router传参_新手使用vue-router传参时注意事项相关推荐
- vue的props传数组_详解vue.js之props传递参数
本篇文章通过demo实例给大家详细分析了props传递参数的用法以及遇到问题后的解决办法,以下是全部内容. 前段时间用vue做一个后台管理系统,其中每一页都需要一个表格来展示信息.自然就想到了将表格提 ...
- vue created 调用方法_深入解析 Vue 的热更新原理,偷学尤大的秘籍?
大家都用过 Vue-CLI 创建 vue 应用,在开发的时候我们修改了 vue 文件,保存了文件,浏览器上就自动更新出我们写的组件内容,非常的顺滑流畅,大大提高了开发效率.想知道这背后是怎么实现的吗, ...
- get vue 和set 用法_深入剖析Vue源码 - 数据代理,关联子父组件
简单回顾一下这个系列的前两节,前两节花了大篇幅讲了vue在初始化时进行的选项合并.选项配置是vue实例化的第一步,针对不同类型的选项,vue提供的丰富选项配置策略以保证用户可以使用不同丰富的配置选项. ...
- vue插槽面试题_关于前端Vue框架的面试题,面试官可能会问到哪些。?
这年头,程序员面试都讲究坐姿,姿势不对,努力白费. 参照下图,请同学们对号入座. 回想一下,自己平时面试的坐姿,你在面试官眼里,大概是什么形象,可能是工程师,也可能是键盘侠,或者找麻烦的. 当然了,想 ...
- vue样式 引入图片_详解Vue.js中引入图片路径的几种方式
vue --version 3.6.3 记录总结一下的Vue中引入图片路径的几种书写方式 vue中静态资源的引入机制 Vue.js关于静态资源的官方文档 静态资源可以通过两种方式进行处理: 在 Jav ...
- vue 二维数组_最近研究Vue源码时我发现的一些好玩函数
来源 | segmentfault.com/u/chinamasters 作者 | chinamasters 最近在深入研究vue源码,把学习过程中,看到的一些好玩的的函数方法收集起来做分享,希望对大 ...
- vue 回车查询 按钮_从零开始学习vue
在github搜小程序我们可以看到许多用许多用vue开发的实例. 到底什么是vue,我们不妨浪费一天时间来了解一下. 一.什么是vue Vue是一个JavaScript框架.作者是国内常年混迹知乎的一 ...
- vue 递归创建菜单_如何在Vue中创建类似中等的突出显示菜单
vue 递归创建菜单 by Taha Shashtari 由Taha Shashtari 如何在Vue中创建类似中等的突出显示菜单 (How to Create a Medium-Like Highl ...
- jenkins vue 打包特别慢_从零开始 使用VUE开发桌面客户端
Electron 是一个非常强大的工具,它可以用来构建跨平台的桌面应用,编写一次到处运行. 知乎视频www.zhihu.com 0. 准备工作 安装好nodejs 在终端中输入 node -v 看到 ...
- vue.js更改颜色_如何使用Vue.js实现简单的标题更改应用程序
vue.js更改颜色 by Anoob Bava 通过Anoob Bava 如何使用Vue.js实现简单的标题更改应用程序 (How to implement a simple title chang ...
最新文章
- NYOJ 30 Gone Fishing JAVA+解析
- 通过http协议访问FTP服务器的搭建,ftp+nginx 图片服务器搭建之后使用http访问进行配置文件的修改
- 对于出差的看法_我对于挑选背包的一些小建议
- Redis缓存数据库(一)
- 曲线抽稀 java_Python实现曲线点抽稀算法
- Shit和trash不是评价设计的词汇
- 工作312:uni-时间戳处理
- 看故事学知识,这篇Java代理的文章妙啊!
- 天池又上工业视觉检测算法大赛:瓶装白酒疵品质检
- MySQL查询表的所有列名,用逗号拼接
- UVA11877 The Coco-Cola Store【模拟】
- Remote Desktop Connection Manager (RDCMan)
- 高通mtk手机常用指令
- 计算机硬盘格式化了如何恢复出厂设置,怎么把电脑格式化?
- 多层神经网络的局部最小值与全局最小值——The problem of convexity
- 2015美亚杯团队赛
- springboot整合mybatis,使用逆向工程和使用通用mapper的方式
- 2018版 主流SDR设备横向比较
- iOS: UIScrollView的属性zooming
- android app 自动更新,app升级项目,新增强制更新(可静默),支持热更新(wgt),可支持高版本安卓系统...