详解Vue路由History mode模式中页面无法渲染的原因及解决


Posted in Javascript onSeptember 28, 2017

Vue下路由History mode导致页面无法渲染的原因

用 Vue.js + vue-router 创建单页应用,是非常简单的。使用 Vue.js ,我们已经可以通过组合组件来组成应用程序,当你要把 vue-router 添加进来,我们需要做的是,将组件(components)映射到路由(routes),然后告诉 vue-router 在哪里渲染它们。

一般开发的单页应用的URL都会带有#号的hash模式,因为整个应用本身而言就只有一个HTML,其他的都是通过router来渲染。如果因为业务需要,或者单纯是觉得带#号不美观,那么可以使用history模式,简单而言就是在router的配置文件index.js中添加如下一行代码:

history: mode

没错,这样URL不再会有#号,你会发现整个地址栏回到了你熟悉的那个样子,不过,接下来介绍的就非常的重要了,可能很多刚入门的新人或多或少都会遇见这么一两个坑…

页面无法渲染

这里以我写的一个项目为例子,当我开启history模式的时候,我并没有对路由进行任何处理,在Dev阶段一切都是正常的,可是打包之后,访问项目路径:

sdp.driver.com/driver/

会发现页面一片空白,但是静态文件都能够正常的引用,因为使用了YII中的模块,所以除了域名之外,还会带有driver模块名。一般很多人创建的项目都放在了根目录下面,也就是:

sdp.driver.com

这样的一种形式,没问题。可是如果配置了模块,或者放置在了子文件夹下面,那么就会出问题。其实,这是因为router无法找到路径中的组件,所以也就无法渲染了。只需要修改router中的index.js,在每个path中加上你项目名称就行了,这样就能够成功了。

详解Vue路由History mode模式中页面无法渲染的原因及解决

最后的页面效果:

详解Vue路由History mode模式中页面无法渲染的原因及解决

404错误

在History mode下,如果直接通过地址栏访问路径,那么会出现404错误,这是因为这是单页应用(废话)…其实是因为调用了history.pushState API 所以所有的跳转之类的操作都是通过router来实现的,解决这个问题很简单,只需要在后台配置如果URL匹配不到任何静态资源,就跳转到默认的index.html。具体配置如下:

Apache

<IfModule mod_rewrite.c>
 RewriteEngine On
 RewriteBase /
 RewriteRule ^index\.html$ - [L]
 RewriteCond %{REQUEST_FILENAME} !-f
 RewriteCond %{REQUEST_FILENAME} !-d
 RewriteRule . /index.html [L]
</IfModule>

nginx

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

Node.js (Express)

关于每次点击链接都要刷新页面的问题

众所周知,开发单页应用就是因为那丝般顺滑的体验效果,如果每次点击都会刷新页面…

出现这个的原因是因为使用了window.location来跳转,只需要使用使用router提供的方法,就能够解决这个问题:

在main.js中配置中将router绑定到全局

Vue.prototype.router = router;

之后都使用如下的方式来控制跳转

this.router.push('driver/service');

好啦,这次关于Vue路由的“坑”就介绍到这里了,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
尽可能写&quot;友好&quot;的&quot;Javascript&quot;代码
Jan 09 Javascript
asp.net下使用jquery 的ajax+WebService+json 实现无刷新取后台值的实现代码
Sep 19 Javascript
location.href用法总结(最主要的)
Dec 27 Javascript
jQuery+ajax中getJSON() 用法实例
Dec 22 Javascript
分享一些常用的jQuery动画事件和动画函数
Nov 27 Javascript
Bootstrap基本组件学习笔记之面板(14)
Dec 08 Javascript
Angular2 PrimeNG分页模块学习
Jan 14 Javascript
微信小程序实现tab左右切换效果
Nov 15 Javascript
JavaScript遍历查找数组中最大值与最小值的方法示例
May 24 Javascript
JS eval代码快速解密实例解析
Apr 23 Javascript
vue实现树状表格效果
Dec 29 Vue.js
Vue全局事件总线你了解吗
Feb 24 Vue.js
Node.js利用断言模块assert进行单元测试的方法
Sep 28 #Javascript
详解基于vue-router的动态权限控制实现方案
Sep 28 #Javascript
node.js学习之断言assert的使用示例
Sep 28 #Javascript
vue-router+vuex addRoutes实现路由动态加载及菜单动态加载
Sep 28 #Javascript
node.js学习之事件模块Events的使用示例
Sep 28 #Javascript
es6中的解构赋值、扩展运算符和rest参数使用详解
Sep 28 #Javascript
JS获取日期的方法实例【昨天,今天,明天,前n天,后n天的日期】
Sep 28 #Javascript
You might like
深入array multisort排序原理的详解
2013/06/18 PHP
Jquery replace 字符替换实现代码
2010/12/02 Javascript
优化innerHTML操作(提高代码执行效率)
2011/08/20 Javascript
JQuery+CSS提示框实现思路及代码(纯手工打造)
2013/05/07 Javascript
Javascript Ajax异步读取RSS文档具体实现
2013/12/12 Javascript
使用jQuery异步加载 JavaScript脚本解决方案
2014/04/20 Javascript
HTML页面登录时的JS验证方法
2014/05/28 Javascript
Javascript判断文件是否存在(客户端/服务器端)
2014/09/16 Javascript
常用DOM整理
2015/06/16 Javascript
JavaScript测试工具之Karma-Jasmine的安装和使用详解
2015/12/03 Javascript
jQuery Ztree行政地区树状展示(点击加载)
2016/11/09 Javascript
Javascript 高性能之递归,迭代,查表法详解及实例
2017/01/08 Javascript
python实现网页链接提取的方法分享
2014/02/25 Python
Python使用urllib2模块抓取HTML页面资源的实例分享
2016/05/03 Python
Python外星人入侵游戏编程完整版
2020/03/30 Python
解决python中遇到字典里key值为None的情况,取不出来的问题
2018/10/17 Python
解决python中画图时x,y轴名称出现中文乱码的问题
2019/01/29 Python
Python实现的统计文章单词次数功能示例
2019/07/08 Python
简单了解python 邮件模块的使用方法
2019/07/24 Python
解决django后台管理界面添加中文内容乱码问题
2019/11/15 Python
文件上传服务器-jupyter 中python解压及压缩方式
2020/04/22 Python
Python unittest单元测试框架实现参数化
2020/04/29 Python
Python压缩模块zipfile实现原理及用法解析
2020/08/14 Python
python中random.randint和random.randrange的区别详解
2020/09/20 Python
关于python中remove的一些坑小结
2021/01/04 Python
html5开发三八女王节表白神器
2018/03/07 HTML / CSS
美国智能家居专家:tink
2019/06/04 全球购物
英国领先的在线高尔夫商店:Scottsdale Golf
2019/08/26 全球购物
科颜氏香港官方网店:Kiehl’s香港
2021/03/07 全球购物
历史学专业个人的自我评价
2013/10/13 职场文书
实践单位评语
2014/04/26 职场文书
实习公司领导推荐函
2014/05/21 职场文书
2014年秋季开学演讲稿
2014/05/24 职场文书
筑梦中国心得体会
2016/01/18 职场文书
2019年圣诞节祝福语集锦
2019/12/25 职场文书
MySQL分区以及建索引的方法总结
2022/04/13 MySQL