vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法


Posted in Javascript onJanuary 25, 2018

解决vue-router嵌套路由(子路由)在history模式下刷新无法渲染页面的问题,具体内容如下

一. 异常描述

本来使用的是vue-router的hash模式,但是hash模式下url需要带“#”符号,不仅看起来不舒服,而且有些场景下是会破坏路由中的"#"(微信分享页面就会把"#"后边的内容处理掉),所以就需要使用history模式,然后就让后端改下nginx配置:

location / { try_files $uri $uri/ /index.html; }

vue-router使用history模式+使用嵌套路由:

const router = new Router({
 mode: 'history',
 routes: [
  {
   path: '/',
   component: mall,
   name: 'mall'
  },
  ……

  //我的银行卡
  {
   path: '/myCard',
   meta: { requireAuth: true },
   component: myCard,
   name: 'myCard',
   children:[
   { path:'', component: card},
   { path:'add', component: add}
   ]
  }
   ……
 ]
})

访问路由和嵌套路由页面,显示正常,但是刷新页面的时候,嵌套路由页面就出异常了:

vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法

页面样式全乱了,看下页面请求加载的静态文件,所有静态文件都是404;

vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法

二. 异常解析

1. 看下官方文档对嵌套路由的说明:

vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法

2. 再看之前的异常页面,看来我们的父路由成了根目录了看下文件路径了:

vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法

3. 看下我们引入这些异常文件,是在index.html文件中直接引用的,也就是在根路径下引入的。之前的hash模式下,根路径是不会变的,所以我们在index.html文件中直接引入这些静态文件,是可行的,但是使用history模式后,根路径就不固定了。那么这种引入方式就不可行了,所以才造成了上边出现的页面无法渲染的问题:

vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法

三. 解决问题

这里有点尴尬,先考虑的主Vue中以Import的方式引入静态样式文件,的确可行,但是最后发现,直接修改index.html文件中的静态文件引入路径就OK了:

修改前:

<script src="./static/js/stomp.js"></script>

修改后

<script src="/static/js/stomp.js"></script>

四. 原理

./ 是指用户所在的当前目录(相对路径);

/ 是指根目录(绝对路径,项目根目录),也就是项目根目录;

对于hash模式,根路径是固定的,就是项目的根目录,但是history模式下,以/开头的嵌套路径会被当作根路径,所以使用“./”引入文件,就会找不到文件了,因为文件本身就是在项目根目录下的,并不在嵌套路径这个目录下。

总结,无论hash模式还是history模式,可以直接使用“/”从项目根目录引入静态文件。

PS:之前一段时间就遇到过这个问题,百度了好久,发现很少有人问这个问题,有一个也没人回答。也问了好些前端大神,还是没能解决这个问题。也许是平时写惯了“./” 和“../”这些开头的路径了吧,并没有注意到静态文件引入方式的问题,折腾了好些方法,最后很尴尬的发现,其实问题很简单,只是对框架的底层了解不透彻罢了!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
css样式标签和js语法属性区别
Nov 06 Javascript
JavaScript中5种调用函数的方法
Mar 12 Javascript
jQuery绑定事件的几种实现方式
May 09 Javascript
jQuery实现左侧导航模块的显示与隐藏效果
Jul 04 Javascript
浅谈js常用内置方法和对象
Sep 24 Javascript
jQuery插件Echarts实现的双轴图效果示例【附demo源码下载】
Mar 04 Javascript
简述Angular 5 快速入门
Nov 04 Javascript
Node.js的进程管理的深入理解
Jan 09 Javascript
在微信小程序中使用图表的方法示例
Apr 25 Javascript
JS判断数组里是否有重复元素的方法小结
May 21 Javascript
Vue使用localStorage存储数据的方法
May 27 Javascript
vue中英文切换实例代码
Jan 21 Javascript
vue通过路由实现页面刷新的方法
Jan 25 #Javascript
jQuery zTree搜索-关键字查询 递归无限层功能实现代码
Jan 25 #jQuery
JavaScript实现职责链模式概述
Jan 25 #Javascript
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
Jan 25 #jQuery
解决Jquery下拉框数据动态获取的问题
Jan 25 #jQuery
vue引入新版 vue-awesome-swiper插件填坑问题
Jan 25 #Javascript
vue better-scroll插件使用详解
Jan 25 #Javascript
You might like
亚洲咖啡有什么?亚洲咖啡产地介绍 亚洲咖啡有什么特点?
2021/03/05 新手入门
php与php MySQL 之间的关系
2009/07/17 PHP
php 生成文字png图片的代码
2011/04/17 PHP
PHP 线程安全与非线程安全版本的区别深入解析
2013/08/06 PHP
PHP+javascript制作带提示的验证码源码分享
2014/05/28 PHP
8个PHP程序员常用的功能汇总
2014/12/18 PHP
解决php写入数据库乱码的问题
2019/09/17 PHP
地震发生中逃生十大法则
2008/05/12 Javascript
Javascript弹出窗口的各种方法总结
2013/11/11 Javascript
js实现当前输入框高亮显示的方法
2015/08/19 Javascript
JavaScript识别网页关键字并进行描红的方法
2015/11/09 Javascript
js中substring和substr两者区别和使用方法
2015/11/09 Javascript
node.js中 stream使用教程
2016/08/28 Javascript
JavaScript实现类似拉勾网的鼠标移入移出效果
2016/10/27 Javascript
微信小程序 详解下拉加载与上拉刷新实现方法
2017/01/13 Javascript
Bootstrap组合上、下拉框简单实现代码
2017/03/06 Javascript
Javascript ES6中数据类型Symbol的使用详解
2017/05/02 Javascript
javascript 判断一个对象为数组的方法
2017/05/03 Javascript
深入浅出webpack之externals的使用
2017/12/04 Javascript
总结网络IO模型与select模型的Python实例讲解
2016/06/27 Python
Python简单定义与使用二叉树示例
2018/05/11 Python
python 剪切移动文件的实现代码
2018/08/02 Python
学生信息管理系统python版
2018/10/17 Python
python 多个参数不为空校验方法
2019/02/14 Python
python pandas模块基础学习详解
2019/07/03 Python
Tensorflow 卷积的梯度反向传播过程
2020/02/10 Python
浅谈HTML5 defer和async的区别
2016/06/07 HTML / CSS
Groupon西班牙官方网站:在线优惠券和交易,节省高达70%
2021/03/13 全球购物
工商管理专业应届生求职信
2013/11/04 职场文书
语文教学随笔感言
2014/02/18 职场文书
工作会议方案
2014/05/21 职场文书
525心理健康活动总结
2015/05/08 职场文书
幼儿园小班班务总结
2015/08/03 职场文书
新手入门Mysql--概念
2021/06/18 MySQL
mysql中如何用命令创建联合唯一索引
2022/04/20 MySQL
vue里使用create, mounted调用方法
2022/04/26 Vue.js