路由传参,path和query的刷新报错js文件丢失
日常的路由跳转,基本都会用到传参,有两种方式: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文件丢失的更多相关文章
- vue 路由传参 params 与 query两种方式的区别
初学vue的时候,不知道如何在方法中跳转界面并传参,百度过后,了解到两种方式,params 与 query.然后,错误就这么来了: router文件下index.js里面,是这么定义路由的: { p ...
- 使用路由传参时,query与params的区别!
query 1:参数会在地址栏显示 2:参数不需要在路由的path后接:args1/:args2 3:获取参数用this.$route.query.args1 params 1:参数需要在路由的pat ...
- vue路由传参的三种方式以及解决vue路由传参页面刷新参数丢失问题
最近项目中涉及到跨页面传参数和后台进行数据交互,看到需求之后第一反应就是用路由传参来解决:Vue中给我们提供了三种路由传参方式,下面我们一个一个的来看一下: 方法一:params传参: this.$r ...
- vue路由传参刷新丢失
没有系统学习过vue,以前使用路由传参都是直接this.$router.push({name:'main',params:{'id': 123}})的,没有在路由定义中配置参数,如下: router: ...
- Vue路由传参及传参后刷新导致参数消失处理
项目功能需要,要从列表页跳转到第三方提供的URL上(这里第三方页面我是通过iframe引入在详情页,目的是点击返回时可以通过keepAlive让列表页不刷新,如果不通过iframe直接跳第三方链接,那 ...
- vue 路由传参中刷新页面参数丢失 及传参的几种方式?
在页面跳转中,我通过路由传参,结果发现页面参数丢失了.路径返回了根目录.... 1. 先说下路由传参的几种方式吧? 比如:<div v-for="item in items" ...
- vue路由传参页面刷新参数丢失问题解决方案
最近项目中涉及到跨页面传参数和后台进行数据交互,看到需求之后第一反应就是用路由传参来解决:Vue中给我们提供了三种路由传参方式,下面我们一个一个的来看一下: 方法一:params传参: this.$r ...
- vue路由传参的三种方式区别(params,query)
最近在做一个项目涉及到列表到详情页的参数的传递,网上搜索一下路由传参,结合自己的写法找到一种适合自己的,不过也对三种写法都有了了解,在此记录一下 <ul class="table_in ...
- 路由传参 query 和 params
vue路由传参分为两种情况: 一.query和params传参的区别: 1.query传参显示参数,params传参不显示参数,params相对于query来说较安全一点. 2.取值方法也有不同:qu ...
随机推荐
- rails 里js 在production 只合并不压缩等问题,以及assets pipeline 加载js 在指定页面上
因为刚学rails,试着做了一个小系统操作微信公共帐号, 之后部署的时候遇见了一个问题,整套系统在互联网端访问,非常的慢,而在手机端访问,10s后才会有响应, 打开chrome的调试工具,发现appl ...
- 初识contiki(2.7版本)
一个偶然的机会,我接触到了contiki这个家伙. Contiki 是一个开源的.高度可移植的.采用 C 语言开发的非常小型的嵌入式操作系统,针对小内存微控制器设计,适用于联网嵌入式系统和无线传感器网 ...
- 通过rsync+inotify实现数据的实时备份(多台备份机)
在前面的博文中,我讲到过利用rsync实现数据的镜像和备份,但是要实现数据的实时备份,单独靠rsync还不能实现,本文就讲述下如何实现数据的实时备份. 一.rsync的优点与不足 与传统的cp.ta ...
- php字符串函数详解
nl2br 功能:化换行符为<br> <?php $str = "cat isn't \n dog"; $result = nl2br($str); echo $ ...
- Spring Boot实战(2) Spring常用配置
1. Bean的Scope scope描述Spring容器如何新建Bean的实例.通过注解@Scope实现,取值有: a. Singleton:一个Spring容器中只有一个Bean的实例.此为Spr ...
- HDU 4578——Transformation——————【线段树区间操作、确定操作顺序】
Transformation Time Limit: 15000/8000 MS (Java/Others) Memory Limit: 65535/65536 K (Java/Others)T ...
- pyhon虚拟环境的安装和使用
安装Python2.7: 1.Mac下使用Python2.7 2.Windows下安装Python2.7. *从python官网下载python2.7的版本 *双击python2.7,然后选择安装路径 ...
- C#多线程进度条
public class ZyjProgressBar : System.Windows.Forms.ProgressBar { //用于跨线程访问控件的委托 private delegate voi ...
- mysql 将null转代为0(转)
1.如果为空返回0 select ifnull(null,0) 2.如果为空返回0,否则返回1 select if(isnull(col),0,1) as col. MYSQL 中的IFNULL函数 ...
- [转]Java内存溢出详解及解决方案
原文地址:http://blog.csdn.net/xianmiao2009/article/details/49254391 内存溢出与数据库锁表的问题,可以说是开发人员的噩梦,一般的程序异常,总是 ...