详解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 相关文章推荐
javascript innerHTML使用分析
Dec 03 Javascript
jquery创建一个ajax关键词数据搜索实现思路
Feb 26 Javascript
JavaScript中数组对象的那些自带方法介绍
Mar 12 Javascript
如何将php数组或者对象传递给javascript
Mar 20 Javascript
express的中间件cookieParser详解
Dec 04 Javascript
js阻止默认浏览器行为与冒泡行为的实现代码
May 15 Javascript
详解Jquery 遍历数组之$().each方法与$.each()方法介绍
Jan 09 Javascript
详解vue-validator(vue验证器)
Jan 16 Javascript
JavaScript事件方法(实例讲解)
Jun 27 Javascript
利用javascript如何随机生成一定位数的密码
Sep 22 Javascript
基于纯JS实现多张图片的懒加载Lazy过程解析
Oct 14 Javascript
React学习之JSX与react事件实例分析
Jan 06 Javascript
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
php 错误处理经验分享
2011/10/11 PHP
ThinkPHP 3.2 数据分页代码分享
2014/10/14 PHP
Yii2.0预定义的别名功能小结
2016/07/04 PHP
PHP 获取 ping 时间的实现方法
2017/09/29 PHP
JavaScript学习笔记(十)
2010/01/17 Javascript
jquery radio 操作代码
2011/03/16 Javascript
修改file按钮的默认样式实现代码
2013/04/23 Javascript
JS页面延迟执行一些方法(整理)
2013/11/11 Javascript
jquery scroll()区分横向纵向滚动条的方法
2014/04/04 Javascript
jquery引用方法时传递参数原理分析
2014/10/13 Javascript
生成二维码方法汇总
2014/12/26 Javascript
JavaScript的new date等日期函数在safari中遇到的坑
2016/10/24 Javascript
基于JS快速实现导航下拉菜单动画效果附源码下载
2016/10/27 Javascript
jQuery插件FusionCharts绘制2D双折线图效果示例【附demo源码】
2017/04/14 jQuery
Postman模拟发送带token的请求方法
2018/03/31 Javascript
详解vue-cli项目开发/生产环境代理实现跨域请求
2019/07/23 Javascript
BootstrapValidator验证用户名已存在(ajax)
2019/11/08 Javascript
JS正则表达式常见函数与用法小结
2020/04/13 Javascript
Python中encode()方法的使用简介
2015/05/18 Python
Pyqt5自适应布局实例
2019/12/13 Python
pytorch .detach() .detach_() 和 .data用于切断反向传播的实现
2019/12/27 Python
新年福利来一波之Python轻松集齐五福(demo)
2020/01/20 Python
python logging设置level失败的解决方法
2020/02/19 Python
VSCODE配置Markdown及Markdown基础语法详解
2021/01/19 Python
数学与统计学院学生个人职业生涯规划书
2014/02/10 职场文书
2014年乡镇植树节活动方案
2014/02/28 职场文书
房屋买卖协议书
2014/04/10 职场文书
程序员求职信
2014/04/16 职场文书
贸易跟单员英文求职信
2014/04/19 职场文书
文艺演出策划方案
2014/06/07 职场文书
党员志愿者活动总结
2014/06/26 职场文书
2014年人力资源工作总结
2014/11/19 职场文书
2015年世界无烟日演讲稿
2015/03/18 职场文书
通知函的格式
2015/04/27 职场文书
Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件
2021/04/17 Vue.js
CSS作用域(样式分割)的使用汇总
2021/11/07 HTML / CSS