在vue项目中参数的传递可以使用本地缓存或者Vuex,那么vue能不能像小程序一样路由传参呢,显然是可以的而且非常简单

方式一:query传参

    //传参
go(){
that.$router.push({
path:'/order',//跳转路径
name: 'Order',//跳转路径的name值,不写跳转后页面取不到参数
// 参数
query: {
name: 'name',
dataObj: {}
}
})
}, //跳转后页面取参
mounted(){
// 路由参数
let mm = this.$route.query//query包含传递的所有参数
},

But 浏览器地址栏中显示如下,所以如果参数保密,该方式慎用啦

方式二:parms传参

        //传参
go(){
this.$router.push({
path:'/order',//跳转路径
name: 'Order',//跳转路径的name值,不写跳转后页面取不到参数
// 参数
params: {
name: 'name',
dataObj: {}
}
})
}, //跳转后页面取参
mounted(){
// 路由参数
let mm = this.$route.params//parms包含传递的所有参数
},

是的就是这么相似,但是传递的参数就不会显示在地址栏了,但是有没有注意到跳转路径的name值必传是不是也不够优雅,不传行不行?见方式三

方式三:不传name

不传name需要对路由配置文件的路径做些改动

       //传参
go(){
let num = '33'
this.$router.push({
path:'/order' + '/' + num,
})
}, //路由配置文件
{
path: '/order/:id',//路由携带的参数
// path: '/order',
name: 'Order',
component: Order
}, //跳转后页面取参
mounted(){
// 路由参数
let mm = this.$route.params//parms包含传递的所有参数
},

vue路由传参并跳转页面的更多相关文章

  1. vue 路由传参中刷新页面参数丢失 及传参的几种方式?

    在页面跳转中,我通过路由传参,结果发现页面参数丢失了.路径返回了根目录.... 1. 先说下路由传参的几种方式吧? 比如:<div v-for="item in items" ...

  2. Vue路由传参的几种方式

    原 Vue路由传参的几种方式 2018年07月28日 23:52:40 广积粮缓称王 阅读数 12613   前言:顾名思义,vue路由传参是指嵌套路由时父路由向子路由传递参数,否则操作无效.传参方式 ...

  3. vue路由传参的三种方式以及解决vue路由传参页面刷新参数丢失问题

    最近项目中涉及到跨页面传参数和后台进行数据交互,看到需求之后第一反应就是用路由传参来解决:Vue中给我们提供了三种路由传参方式,下面我们一个一个的来看一下: 方法一:params传参: this.$r ...

  4. vue路由传参页面刷新参数丢失问题解决方案

    最近项目中涉及到跨页面传参数和后台进行数据交互,看到需求之后第一反应就是用路由传参来解决:Vue中给我们提供了三种路由传参方式,下面我们一个一个的来看一下: 方法一:params传参: this.$r ...

  5. vue路由传参刷新丢失

    没有系统学习过vue,以前使用路由传参都是直接this.$router.push({name:'main',params:{'id': 123}})的,没有在路由定义中配置参数,如下: router: ...

  6. vue路由传参的几种基本方式

    原文地址 this.$router.push跳转 现有如下场景,点击父组件的li元素跳转到子组件中,并携带参数,便于子组件获取数据.父组件中: <li v-for="article i ...

  7. vue 路由传参

      mode:路由的形式 用的哪种路由 1.hash 路由 会带#号的哈希值 默认是hash路由   2.history路由 不会带#的     单页面开发首屏加载慢怎么解决?单页面开发首屏加载白屏怎 ...

  8. Vue路由传参及传参后刷新导致参数消失处理

    项目功能需要,要从列表页跳转到第三方提供的URL上(这里第三方页面我是通过iframe引入在详情页,目的是点击返回时可以通过keepAlive让列表页不刷新,如果不通过iframe直接跳第三方链接,那 ...

  9. vue路由传参的三种方式区别(params,query)

    最近在做一个项目涉及到列表到详情页的参数的传递,网上搜索一下路由传参,结合自己的写法找到一种适合自己的,不过也对三种写法都有了了解,在此记录一下 <ul class="table_in ...

随机推荐

  1. 简单的浏览器调试——console命令

    一.显示信息 <script type="text/javascript"> console.log('hello'); console.info('信息'); con ...

  2. Verilog之SOS信号-仿顺序操作

    SOS信号:. . . _ _ _ . . . 1. module sos_module ( CLK, RSTn, Pin_Out, SOS_En_Sig ); input CLK; input RS ...

  3. 从P6 EPPM 8 R3 到P6 EPPM 16 R1 有哪些改变?

    Product 特征 First Release for Feature P6 EPPM 通过编辑活动标识替换关系.当你需要修改一个关系,你不需要删除现有的关系,并作出一个新的,你可以简单地编辑活动的 ...

  4. Java 中equals和toString()方法重写

    1,equals方法 (1)什么时候需要重写? 如果希望不同内存但相同内容的两个对象equals时返回true,则需要重写equals (2)怎么重写? class A { public int i; ...

  5. 关于51单片机P0口的结构及上拉问题

    1.P0作为地址数据总线时,V1和V2是一起工作的,构成推挽结构.高电平时,V1打开,V2截止:低电平时,V1截止,V2打开.这种情况下不用外接上拉电阻.而且,当V1打开,V2截止,输出高电平的时候, ...

  6. Java 文件句柄泄露问题解决小记

    维护 WebIDE 免不了要管理很多的文件, 自从我们线上系统增加了资源回收功能,便一直受一个问题困扰:后台线程解绑目录时偶尔报错,看症状因为是某些文件被占用了,目录不能解绑.但是由于系统中很多地方都 ...

  7. HTML5新增的标签及使用

    HTML5和HTML其实是很相似的,但是有些内容有发生了改变,今天我学习了一下HTML5发现还是挺好学的,只要有html+css基础就可以,今天知识看了下新的标签. 一.定义文档类型 在文件的开头总是 ...

  8. VIM批量缩进

    方法一 1.按 ctrl + shif + ;  进入底行模式 2.将所要批量缩进的行号写上,按照格式:“行号1,行号2>”输入命令,如要将4至11行批量缩进一个tab值,则命令为“4,11&g ...

  9. 字王大藏经体v0.1概念版

    字王大藏经体v0.1概念版 zw-dzj 字王大藏经体v0.1概念版,是字王<中华大字库>2018版升级过程当中,在Github搜索资源时的意外惊喜. 大藏经为佛教经典的总集,简称为藏经. ...

  10. [原]win10下编译lua5.3.4

    1.下载lua源码http://www.lua.org/ftp/ 2.打开vs2012工具命令提示 3.cd 到lua源码的src目录 4.依次执行以下代码 cl /MD /O2 /c /DLUA_B ...