详解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 相关文章推荐
offsetParent 算法分析
Apr 05 Javascript
同域jQuery(跨)iframe操作DOM(示例代码)
Dec 13 Javascript
JavaScript中使用arguments获得函数传参个数实例
Aug 27 Javascript
AngularJS快速入门
Apr 02 Javascript
js数组去重的方法汇总
Jul 29 Javascript
多种JQuery循环滚动文字图片效果代码
Jun 23 Javascript
JS常见创建类的方法小结【工厂方式,构造器方式,原型方式,联合方式等】
Apr 01 Javascript
js图片轮播插件的封装
Jul 21 Javascript
react-native使用leanclound消息推送的方法
Aug 06 Javascript
微信小程序实现同一页面取值的方法分析
Apr 30 Javascript
vue 弹出遮罩层样式实例
Jul 22 Javascript
Vue实现点击导航栏当前标签后变色功能
Aug 19 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 购物车的例子
2009/05/04 PHP
PHP 处理图片的类实现代码
2009/10/23 PHP
PHP实现异步调用方法研究与分享
2011/10/27 PHP
win7 64位系统 配置php最新版开发环境(php+Apache+mysql)
2014/08/15 PHP
php中instanceof 与 is_a()区别分析
2015/03/03 PHP
php删除指定目录的方法
2015/04/03 PHP
php 广告点击统计代码(php+mysql)
2018/02/21 PHP
javascript获取当前ip的代码
2009/05/10 Javascript
基于Jquery的开发个代阴影的对话框效果代码
2011/07/28 Javascript
js模仿jquery的写法示例代码
2013/06/16 Javascript
JS获取随机数函数可自定义最小值最大值
2014/05/08 Javascript
JavaScript DOM元素尺寸和位置
2015/04/13 Javascript
简单实现Bootstrap标签页
2020/08/09 Javascript
jQuery插件zTree实现的多选树效果示例
2017/03/08 Javascript
AngularJS路由切换实现方法分析
2017/03/17 Javascript
解决vue-cli + webpack 新建项目出错的问题
2018/03/20 Javascript
JS实现简单的抽奖转盘效果示例
2019/02/16 Javascript
JavaScript模块管理的简单实现方式详解
2019/06/15 Javascript
Flutter实现仿微信底部菜单栏功能
2019/09/18 Javascript
Vue.js中的高级面试题及答案
2020/01/13 Javascript
[13:18]《一刀刀一天》之DOTA全时刻21:详解TI新赛制 A队再露獠牙
2014/06/24 DOTA
跟老齐学Python之集合(set)
2014/09/24 Python
python中is与双等于号“==”的区别示例详解
2017/11/21 Python
Python使用分布式锁的代码演示示例
2018/07/30 Python
Python列表推导式与生成器用法分析
2018/08/02 Python
Pytest框架之fixture的详细使用教程
2020/04/07 Python
Python 操作 PostgreSQL 数据库示例【连接、增删改查等】
2020/04/21 Python
什么是虚拟内存?虚拟内存有什么优势?
2012/02/19 面试题
汉语言文学毕业生求职信
2013/10/01 职场文书
领导班子民主生活会整改措施(工商局)
2014/09/21 职场文书
个人自查自纠材料
2014/10/14 职场文书
2015年社区综治宣传月活动总结
2015/03/25 职场文书
门面租赁合同范文
2019/08/06 职场文书
python 模块重载的五种方法
2021/04/24 Python
MySQL基于索引的压力测试的实现
2021/11/07 MySQL
MIME类型中application/xml与text/xml的区别介绍
2022/01/18 HTML / CSS