打印this.$route显示结果:

跳转路由传递参数如下

this.$router.push({
name: 'Page',
query/params: {
key: value
})
<router-link :to="{name:xxx,params:{key:value}}">valueString</router-link>

最后在跳转后的路由用 this.$route.params.paramName 和 this.$route.query.paramName 取值

用params去传值的时候,在页面刷新时,参数会消失,用query则不会有这个问题。

vue路由传值方式的更多相关文章

  1. vue路由传值params和query的区别

    vue路由传值params和query的区别1.query传参和接收参数传参: this.$router.push({ path:'/xxx' query:{ id:id } })接收参数: this ...

  2. vue中组件传值方式汇总

    在应用复杂时,推荐使用vue官网推荐的vuex,以下讨论简单SPA中的组件间传值. 一.路由传值 路由对象如下图所示: 在跳转页面的时候,在js代码中的操作如下,在标签中使用<router-li ...

  3. vue几种简单的传值方式

    除了一下的几种方式外,可以参考 https://www.cnblogs.com/hpx2020/p/10936279.html 组件传值的方法: 一.父组件向子组件传递数据(props) 第1:父组件 ...

  4. Vue 常用三种传值方式

    Vue常用的三种传值方式: 父传子 子传父 非父子传值 引用官网一句话:父子组件的关系可以总结为 prop 向下传递,事件向上传递.父组件通过 prop 给子组件下发数据,子组件通过事件给父组件发送消 ...

  5. Vue的七种传值方式

    目录 1,父传子 2,子传父 3,兄弟组件传值 4,父组件使用子组件的数据和方法 5,子组件使用父组件的数据和方法 6,Vuex传值 6.1,定义store 6.2,挂载 6.3,使用 7,路由传值 ...

  6. Vue中常用的几种传值方式

    Vue中常用的几种传值方式 1. 父传子 父传子的实现方式就是通过props属性,子组件通过props属性接收从父组件传过来的值,而父组件传值的时候使用 v-bind 将子组件中预留的变量名绑定为da ...

  7. vue组件之间的传值方式

    一.父组件向子组件传值方式 1.1父组件向子组件传数据方式 <!DOCTYPE html> <html lang="en"> <head> &l ...

  8. react之传递数据的几种方式props传值、路由传值、状态提升、redux、context

    react之传递数据的几种方式 1.父子传值 父传值:<子的标签 value={'aaa'} index={'bbb'}></子的标签> 子接值:<li key={thi ...

  9. vue权限路由实现方式总结二

    之前已经写过一篇关于vue权限路由实现方式总结的文章,经过一段时间的踩坑和总结,下面说说目前我认为比较"完美"的一种方案:菜单与路由完全由后端提供. 菜单与路由完全由后端返回 这种 ...

随机推荐

  1. Python3.7中urllib.urlopen 报错问题

    import urllib web = urllib.urlopen('https://www.baidu.com') f = web.read() print(f) 报错: Traceback (m ...

  2. linq partion by 用法

    var PartinoByList = list.OrderBy(x => x.DateType).GroupBy(x => new { x.ProductCatagoryId, x.Su ...

  3. avalon2学习教程02之vm

    avalon2的vm是一个非常重要的东西,其设计原型最初脱胎于knockout.js,但到avalon1.6中,终于寻得自己的方案,更精简,更易用,更魔幻. vm是一种特殊的数据结构,看起来像普通对象 ...

  4. OpenWrt上搭建纯L2TP服务器[ZT]

    转自:http://www.openwrt.pro/post-389.html 纯L2TP(l2tp + ppp,无IPSec) 首先安装xl2tpd软件包 opkg update opkg inst ...

  5. C++ : 窗口变化相关消息 OnSize、OnSizing和OnGetMinMaxInfo,onsizeonsizing

    个消息分别是:WM_SIZE.WM_SIZING.WM_GETMINMAXINFO:分别对应相应的处理函数:OnSize.OnSizing.OnGetMinMaxInfo. 当窗口大小发生变化时,响应 ...

  6. linux下搭建生成HLS所需的.ts和.m3u8文件

    要想利用HLS来实现视频的在线播放,就得需要将一个完整的视频文件切割成多个ts视频流,然后利用m3u8的索引文件来播放. 在Mac下,苹果提供了streamingTools的工具,里面有mediafi ...

  7. 历届试题 对局匹配-(dp)

    问题描述 小明喜欢在一个围棋网站上找别人在线对弈.这个网站上所有注册用户都有一个积分,代表他的围棋水平. 小明发现网站的自动对局系统在匹配对手时,只会将积分差恰好是K的两名用户匹配在一起.如果两人分差 ...

  8. java 方法引用(method reference)

    it -> it != null等价于Objects::nonNull

  9. java+selenium自动化实践

    git+java+selenium+testng +maven+idea 1.git之代码维护(下载.分支切换.上传) 下载命令 "git clone git@github.com:Luna ...

  10. Java的学习02

    今天依旧记录一下今天的学习的知识. /** * 测试StringBuilder StringBuffer,可变字符序列 * String对象称为“不可变对象"指的是对象内部成员变量的值无法再 ...