日常的路由跳转,基本都会用到传参,有两种方式:path + query, name + params

常用的写法:

this.$router.push({ path: 'proDetail',query:{id:query.id,from:this.menuName,fromPath:'proList'}});

或者

this.$router.push({ name: 'proDetail',params:{id:query.id,from:this.menuName,fromPath:'proList'}});

甚至一般情况下,name + query ,path + params也都没问题。

但有一种情况要注意:使用了动态路由带参数

       {
path: '/proList/:id',
name: 'proList',
component: resolve => require(['../components/proList'], resolve)
},

这个时候需要固定的写法,定义了path带参数,那么如果还是用query话,刷新会有报错,因为需要你提供参数,这里为什么写name呢,因为path的话,它是动态的了 /proList/:id 。

this.$router.push({ name: 'proDetail',params:{id:query.id,from:this.menuName,fromPath:'proList'}});

第二种情况:query + path一起用。刷新页面也会有报错。报错基本是下面这个的,资源路径加载会出问题。暂时原因还在找,网上没找到合适的说法。

总结:以上情况,在前进路由,路由倒退,日常跳转都没有任何问题,页面一刷新就报错这个,然后导致iconfont图片都没了,加密的js也不能用。

1:定义了path带参数,就要使用params传参

2:query + params不能同时使用。

最后:如果有路过的大神,希望能给个答案!感激不尽

路由传参,path和query的刷新报错js文件丢失的更多相关文章

  1. vue 路由传参 params 与 query两种方式的区别

    初学vue的时候,不知道如何在方法中跳转界面并传参,百度过后,了解到两种方式,params 与 query.然后,错误就这么来了:  router文件下index.js里面,是这么定义路由的: { p ...

  2. 使用路由传参时,query与params的区别!

    query 1:参数会在地址栏显示 2:参数不需要在路由的path后接:args1/:args2 3:获取参数用this.$route.query.args1 params 1:参数需要在路由的pat ...

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

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

  4. vue路由传参刷新丢失

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

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

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

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

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

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

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

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

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

  9. 路由传参 query 和 params

    vue路由传参分为两种情况: 一.query和params传参的区别: 1.query传参显示参数,params传参不显示参数,params相对于query来说较安全一点. 2.取值方法也有不同:qu ...

随机推荐

  1. IA-32e架构下的内核初始化内存管理

    初级内存管理单元 关于内存的分页 以往的物理页是按照4KB进行分配和管理的, 而在Linux之后流行的就是2MB大小的物理页的分配和管理, 整个物理内存管理单元也是2MB物理页管理的 先获取基本的物理 ...

  2. HDU 5446——Unknown Treasure——————【CRT+lucas+exgcd+快速乘+递推求逆元】

    Each test case starts with three integers n,m,k(1≤m≤n≤1018,1≤k≤10) on a line where k is the number o ...

  3. Newtonsoft.Json解析json字符串和写json字符串

    写: StringWriter sw = new StringWriter(); JsonWriter writer = new JsonWriter(sw); //如果报错则使用JsonWriter ...

  4. 大话java基础知识一之为什么java的主函数入口必须是public static void

    为什么java的主函数入口必须是public static void main (String[] args); 很多写javaEE好几年的程序员经常会记得java的主函数就是这么写的,但实际上为什么 ...

  5. cf1059D. Nature Reserve(三分)

    题意 题目链接 Sol 欲哭无泪啊qwq....昨晚一定是智息了qwq 说一个和标算不一样做法吧.. 显然\(x\)轴是可以三分的,半径是可以二分的. 恭喜你获得了一个TLE的做法.. 然后第二维的二 ...

  6. Android基础Activity篇——Intent返回数据给上一个活动

    1.如果活动B要将数据返回给活动A,那么需要以下三步: 1.1在活动A中使用startActivityForResult()方法启动活动B. 1.2在活动B中使用setResult()方法传回Iten ...

  7. rrdtool

    参考 http://oss.oetiker.ch/rrdtool/doc https://calomel.org/rrdtool.html http://www.cnblogs.com/lightid ...

  8. java学习笔记之基础知识

    1.class不加修饰符默认default,只在当前包里能用. 2.构造函数前面的修饰符的作用类似class的,限制引用的权限. 3.java对象的创建其实就是类的实例化,类的实例化就是在堆上copy ...

  9. html+javascript+soap获取webservice免费天气预报信息

    转自:http://blog.163.com/hubeimeiyu@126/blog/static/8004881020118303318687/ 首先,也是最重要的是互联网上免费的天气预报源:htt ...

  10. ES6相关特性(解构赋值)

    解构赋值:本质上是一种匹配模式,等号两边的模式相同,则左边的变量可以被赋予对应的值. 注意:null & undefined 不能解构赋值!!! 数组的解构赋值: let [a,[[b],c] ...