vue-router中参数传递
VUE路由之间携带参数
今天在实现一个功能的时候遇到的问题,一个把组件a中的值传输到组件b中时,但是组件a和组件b之间通信的时候路由跳转了
猜想:路由跳转导致监听事件失败,(暂时理解为:当路由跳转后监听不到这个事件,因为是路由跳转了)
解决方法:通过路由携带参数代替组件通信
方法一:通过query携带参数
this.$router.push({path:'/user',query:{userid:'001'})
//user组件
this.$route.query.userid   ->'001'
缺点:传递的参数会通过在地址栏中显示
方法一:通过params携带参数
//login组件
this.$router.push({name:'user',params:{userid:'001'})
//user组件
this.$route.params.userid   ->'001'
注:如果通过params传递参数需要使用路由的naem属性进行跳转
除此之还有的就是在路由中写的是
//router.js
const router = new VueRouter({
routers:[
{path:'/login',name:'Login',componentor:'Login'},
{path:''/user/:userid',name:'User',componentor:'User'}
]
})
//login
this.$router.push({path:'/user/001'})
//user
this.route.params.userid -> 001
浏览器的地址栏中是: xxxxxx/user/001
vue-router中参数传递的更多相关文章
- Vue router中携带参数与获取参数
		Vue router中携带参数与获取参数 携带参数 query方式,就是?+&结构,例如/login?id=1 <router-link :to="{ name:'login' ... 
- vue router 中,children 中 path 为空字符串的路由,是默认打开的路由(包括在 el-tabs 中嵌套路由的情况)
		详见该页面的最后一个代码块:https://router.vuejs.org/zh/guide/essentials/nested-routes.html#%E5%B5%8C%E5%A5%97%E8% ... 
- [Vue 牛刀小试]:第十二章 - 使用 Vue Router 实现 Vue 中的前端路由控制
		一.前言 前端路由是什么?如果你之前从事的是后端的工作,或者虽然有接触前端,但是并没有使用到单页面应用的话,这个概念对你来说还是会很陌生的.那么,为什么会在单页面应用中存在这么一个概念,以及,前端路由 ... 
- [Vue 牛刀小试]:第十四章 - 编程式导航与实现组件与 Vue Router 之间的解耦
		一.前言 在上一章的学习中,通过举例说明,我们了解了 Vue Router 中命名路由.命名视图的使用方法,以及如何通过 query 查询参数传参,或者是采用 param 传参的方式实现路由间的参数传 ... 
- [Vue 牛刀小试]:第十三章 - Vue Router 基础使用再探(命名路由、命名视图、路由传参)
		一.前言 在上一章的学习中,我们简单介绍了前端路由的概念,以及如何在 Vue 中通过使用 Vue Router 来实现我们的前端路由.但是在实际使用中,我们经常会遇到路由传参.或者一个页面是由多个组件 ... 
- Vue Router学习笔记
		前端的路由:一个地址对应一个组件 Vue Router中文文档 一.路由基本使用 第1步:导入Vue Router: <script src="https://unpkg.com/vu ... 
- vue router.push(),router.replace(),router.go()和router.replace后需要返回两次的问题
		转载:https://www.cnblogs.com/lwwen/p/7245083.html https://blog.csdn.net/qq_15385627/article/details/83 ... 
- python 全栈开发,Day91(Vue实例的生命周期,组件间通信之中央事件总线bus,Vue Router,vue-cli 工具)
		昨日内容回顾 0. 组件注意事项!!! data属性必须是一个函数! 1. 注册全局组件 Vue.component('组件名',{ template: `` }) var app = new Vue ... 
- Vue Router的懒加载路径
		单页应用产出的入口chunk大小随着业务的复杂度线性增加,导致后期加载速度越来越慢.后面就需要对不同路径下的模块进行拆分,打包到相应的chunk下,按需加载,找到chunk的大小.个数和页面加载速度的 ... 
- vue.js 中this.$router.push()的使用
		在vue项目中,跳转可以用router-link直接跳到某个页面 因为有时候会需要做一些判断等情况,所以要用到 this.$router.push() 因为外链跳转根本就不在router的设计考虑范围 ... 
随机推荐
- 关于c++静态类的说法
			看了网上的观点,大致有这几种比较好的. 观点一:根据现代的C++观点,静态类没有必要存在于C++中. 一个类是对一个概念的描述,类的本质是它维护了一个不变式,也就是说它有一个状态,它所有的接口都是为了 ... 
- distpicker.js 根据当前位置初始化select
			学习参考的地址放在最醒目的地方: https://blog.csdn.net/idea_boy/article/details/58280076 百度官方实例:http://developer.bai ... 
- 2.2 学习总结 之 servlet 的两次抽取
			说在前面 昨天 完成了文件上出的学习和实践 今天 学习servlet的两次抽取,以加快编写工程的速度 一.servlet 抽取的原因: 刚刚学习使用servlet写后台,往往只使用一个servlet来 ... 
- EL&JSTL简单介绍
			EL表达式 是为了简化咱们的jsp代码,具体一点就是为了简化在jsp里面写的那些java代码. 写法格式 ${表达式 } 如果从作用域中取值,会先从小的作用域开始取,如果没有,就往下一个作用域取. 一 ... 
- Transaction Managament(事务管理一、概念)
			什么是事务 对于一个软件系统来说,我们需要相应的数据资源来保存体统状态.在对系统状态所依托的数据资源的时候,为了保证系统始终处于“正确”状态,我们必须对这些访问操作进行一些必要的限定.以保证系统状态的 ... 
- tortoiseGit 的简单使用说明
			拉取仓库到本地 参考 下面几张图片,把仓库拉取到本地. 本地修改并推送 进入文件夹后,按照 下面几张图片切换到本地的开发分支 当修改完成之后,按照 下面几张图片 的方法把修改推送到远程仓库的开发分支. ... 
- SASS - 简介
			SASS – 简介 SASS – 环境搭建 SASS – 使用Sass程序 SASS – 语法 SASS – 变量 SASS- 局部文件(Partial) SASS – 混合(Mixin) SASS ... 
- psp  --2
			PSP0 ---2 项目计划日志 姓名:赵腾 日期:9/12/2017 任务 日期 听课 编写程序 阅读课 ... 
- Charles下载与破解方法
			文章参考:charles4.2下载与破解方法以及配置https 1.Charles官网下载 地址:https://www.charlesproxy.com/latest-release/downloa ... 
- GitHub上传家庭记账本
			GitHub的使用参考之前的博客GitHub的初步了解和使用,并完成了相关的android个人家庭记账本的上传 
