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# NPOI的数据批量导入数据库
public ActionResult Upload(HttpPostedFileBase Namefile) { //判断文件是否存在 if ...
- C# Stream篇(七) -- NetworkStream
NetworkStream 目录: NetworkStream的作用 简单介绍下TCP/IP 协议和相关层次 简单说明下 TCP和UDP的区别 简单介绍下套接字(Socket)的概念 简单介绍下Tcp ...
- vim使用技巧(常用指令)
1. vim基础操作 vim是从 vi 发展出来的一个文本编辑器 .代码补完.编译及错误跳转等做了一些增强 1.1 进入编辑模式 命令 含义 i和I i在光标前插入,I在行首插入. a和A a在光标后 ...
- RobotFramwork中实现oracle数据库的连接(终于解决cx_oracle问题)
RobotFramework连接数据库有java实现,也有python实现的,现在研究的python实现的,java还没尝试.有兴趣的参考后面的转载文章. 步骤(也转载了别人的文章,因为写的比 ...
- 图床工具PicGO实现七牛云图片上传
图床工具PicGO实现七牛云图片上传 我们在写博客或者网络文章时经常需要上传图片.目前最有名气的图床工具就是PicGO. 简单的界面,完整的功能,在相册里也能直接复制markdown图片链接.一直深受 ...
- 51nod 1429:巧克力
1429 巧克力 题目来源: CodeForces 基准时间限制:1 秒 空间限制:131072 KB 分值: 80 难度:5级算法题 收藏 关注 现在有两个块巧克力一块大小是 的,另外一块大 ...
- Day1-T1
原题目 Describe:普通前缀和(当然有升级版的题目,范围3000+) code: #include<bits/stdc++.h> #define maxn 1010 #define ...
- nginx安装出现:cp: `conf/koi-win' and `/application/nginx-1.6.3/conf/koi-win' are the same file
nginx编译安装时make出现如下错误 ]: Leaving directory `/application/nginx-' make -f objs/Makefile install ]: Ent ...
- 深入理解C指针<一>
指针和内存 C程序在编译后,会以三种形式使用内存: 静态.全局内存:静态变量和全局变量使用这部分内存,生存周期为整个程序运行时,全局变量所有函数都可以访问,但静态变量虽然生存周期为整个程序运行时,但作 ...
- tensorflow之最近邻算法实现
最近邻算法,最直接的理解就是,输入数据的特征与已有数据的特征一一进行比对,最靠近哪一个就将输入数据划分为那一个所属的类,当然,以此来统计k个最靠近特征中所属类别最多的类,那就变成了k近邻算法.本博客同 ...