VUE路由之间携带参数

今天在实现一个功能的时候遇到的问题,一个把组件a中的值传输到组件b中时,但是组件a和组件b之间通信的时候路由跳转了

猜想:路由跳转导致监听事件失败,(暂时理解为:当路由跳转后监听不到这个事件,因为是路由跳转了)

解决方法:通过路由携带参数代替组件通信

方法一:通过query携带参数

//login组件
this.$router.push({path:'/user',query:{userid:'001'})

//user组件
this.$route.query.userid ->'001'

缺点:传递的参数会通过在地址栏中显示

  

方法一:通过params携带参数

//login组件
//login组件

this.$router.push({name:'user',params:{userid:'001'})

//user组件
this.$route.params.userid ->'001'

注:如果通过params传递参数需要使用路由的naem属性进行跳转

除此之还有的就是在路由中写的是

//login组件
//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中参数传递的更多相关文章

  1. Vue router中携带参数与获取参数

    Vue router中携带参数与获取参数 携带参数 query方式,就是?+&结构,例如/login?id=1 <router-link :to="{ name:'login' ...

  2. vue router 中,children 中 path 为空字符串的路由,是默认打开的路由(包括在 el-tabs 中嵌套路由的情况)

    详见该页面的最后一个代码块:https://router.vuejs.org/zh/guide/essentials/nested-routes.html#%E5%B5%8C%E5%A5%97%E8% ...

  3. [Vue 牛刀小试]:第十二章 - 使用 Vue Router 实现 Vue 中的前端路由控制

    一.前言 前端路由是什么?如果你之前从事的是后端的工作,或者虽然有接触前端,但是并没有使用到单页面应用的话,这个概念对你来说还是会很陌生的.那么,为什么会在单页面应用中存在这么一个概念,以及,前端路由 ...

  4. [Vue 牛刀小试]:第十四章 - 编程式导航与实现组件与 Vue Router 之间的解耦

    一.前言 在上一章的学习中,通过举例说明,我们了解了 Vue Router 中命名路由.命名视图的使用方法,以及如何通过 query 查询参数传参,或者是采用 param 传参的方式实现路由间的参数传 ...

  5. [Vue 牛刀小试]:第十三章 - Vue Router 基础使用再探(命名路由、命名视图、路由传参)

    一.前言 在上一章的学习中,我们简单介绍了前端路由的概念,以及如何在 Vue 中通过使用 Vue Router 来实现我们的前端路由.但是在实际使用中,我们经常会遇到路由传参.或者一个页面是由多个组件 ...

  6. Vue Router学习笔记

    前端的路由:一个地址对应一个组件 Vue Router中文文档 一.路由基本使用 第1步:导入Vue Router: <script src="https://unpkg.com/vu ...

  7. 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 ...

  8. python 全栈开发,Day91(Vue实例的生命周期,组件间通信之中央事件总线bus,Vue Router,vue-cli 工具)

    昨日内容回顾 0. 组件注意事项!!! data属性必须是一个函数! 1. 注册全局组件 Vue.component('组件名',{ template: `` }) var app = new Vue ...

  9. Vue Router的懒加载路径

    单页应用产出的入口chunk大小随着业务的复杂度线性增加,导致后期加载速度越来越慢.后面就需要对不同路径下的模块进行拆分,打包到相应的chunk下,按需加载,找到chunk的大小.个数和页面加载速度的 ...

  10. vue.js 中this.$router.push()的使用

    在vue项目中,跳转可以用router-link直接跳到某个页面 因为有时候会需要做一些判断等情况,所以要用到 this.$router.push() 因为外链跳转根本就不在router的设计考虑范围 ...

随机推荐

  1. C# 借助CommandLine 写命令行工具 在数据库中创建job

    首先需要用到  CommandLine.dll 提供两个下载链接,云盘是我自己上传的,也就是我在用的 http://commandline.codeplex.com/ https://pan.baid ...

  2. HDU 3397 线段树 双懒惰标记

    这个是去年遗留历史问题,之前思路混乱,搞了好多发都是WA,就没做了 自从上次做了大白书上那个双重懒惰标记的题目,做这个就思路很清晰了 跟上次大白上那个差不多,这个也是有一个sets标记,代表这个区间全 ...

  3. ES6 新特性(笔记)

    1.定义变量     let         a).块作用域 , 不同于var的函数作用域         b).不可以重复定义同一个变量名           注:              {} ...

  4. html语一化/块/行级元素

    html文件不区分大小写.//vue项目中组件名字驼峰 使用时候却全部小写 说明不区分 html语义化的意思, 就是标签名带有一定含义和一些css样式.比如h1-h6是标题 自动放大变粗,img是图片 ...

  5. 每天一点点之vue框架开发 - 如何在一个页面调用另一个同级页面的方法

    使用场景: 页面分为header.home.footer三部分,需要在home中调用header中的方法,这两个没有相互引入 官方给出方法: api传送门 在项目中实现: 1.首先同一个vue实例来调 ...

  6. 【pwnable.kr】col

    pwnable从入门到放弃第二题, ssh col@pwnable.kr -p2222 (pw:guest) 同样是登录,然后看到了col.c.col.flag三个文件,读一下col.c #inclu ...

  7. sqli-labs注入lesson1-2闯关秘籍

    ·lesson1 1.判断是否存在注入,并判断注入的类型 其实根据第一关提示 判断注入类型 输入下面的语句进行测试: ?id= 返回界面如下图:说明存在 字符型注入 2. 使用order by 猜测S ...

  8. oracle11g忘记管理员密码

    oracle的sys和system密码是我们经常忘记的,忘记之后我们可以通过sqlplus来修改重置. 首先打开sqlplus:在运行处可直接输入打开 进入窗口后,首先输入 sqlplus/as sy ...

  9. day24(024-多线程(上))

    ###24.01_多线程(多线程的引入)(了解) 1.什么是线程 线程是程序执行的一条路径, 一个进程中可以包含多条线程 多线程并发执行可以提高程序的效率, 可以同时完成多项工作 2.多线程的应用场景 ...

  10. Tmux和一点nohup

    1.当我们用ssh连接服务器时,只有一个终端,但有时候我们希望有多个. 2.有些程序需要运行一些时间,在这个时间里,我们希望可以去做其他的事情. 3.有的程序要跑好几个小时,这时候,我们希望断开远程连 ...