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

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中加上你项目名称就行了，这样就能够成功了。

最后的页面效果：

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路由的“坑”就介绍到这里了，希望对大家的学习有所帮助，也希望大家多多支持。

# vue  # mode  # history  # history模式  # 404  # 针对Vue路由history模式下Nginx后台配置操作  # vue多页面项目中路由使用history模式的方法  # vue-router路由模式详解(小结)  # VUE的history模式下除了index外其他路由404报错解决办法  # vue2.0 路由模式mode="history"的作用  # Vue路由history模式解决404问题的几种方法  # Vue下路由History模式打包后页面空白的解决方法  # 3种vue路由传参的基本模式  # vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法  # vue 基于abstract 路由模式 实现页面内嵌的示例代码  # 都是  # 跳转  # 是因为  # 只需要  # 这是因为  # 解决这个问题  # 的是  # 这是  # 就会  # 使用了  # 会有  # 放在  # 都要  # 也就  # 还会  # 很多人  # 当你  # 只需  # 其他的  # 当我 

相关文章： 网站制作哪家好,cc、.co、.cm哪个域名更适合做网站？  建站之星后台密码如何安全设置与找回？  定制建站是什么？如何实现个性化需求？  如何在云服务器上快速搭建个人网站？  网站制作模板下载什么软件,ppt模板免费下载网站？  如何在服务器上三步完成建站并提升流量？  建站之星后台管理：高效配置与模板优化提升用户体验  高配服务器限时抢购：企业级配置与回收服务一站式优惠方案  上海网站制作网站建设公司,建筑电工证网上查询系统入口？  建站之星如何助力网站排名飙升？揭秘高效技巧  SAX解析器是什么，它与DOM在处理大型XML文件时有何不同？  高端网站建设与定制开发一站式解决方案 中企动力  攀枝花网站建设,攀枝花营业执照网上怎么年审？  头像制作网站在线观看,除了站酷，还有哪些比较好的设计网站？  ,制作一个手机app网站要多少钱？  手机网站制作平台,手机靓号代理商怎么制作属于自己的手机靓号网站？  h5在线制作网站电脑版下载,h5网页制作软件？  如何处理“XML格式不正确”错误 常见XML well-formed问题解决方法  建站之星安装后界面空白如何解决？  实例解析Array和String方法  制作网站的过程怎么写,用凡科建站如何制作自己的网站？  Android使用GridView实现日历的简单功能  网站设计制作公司地址,网站建设比较好的公司都有哪些？  建站之星手机一键生成：多端自适应+小程序开发快速建站指南  惠州网站建设制作推广,惠州市华视达文化传媒有限公司怎么样？  三星网站视频制作教程下载,三星w23网页如何全屏？  如何在万网自助建站中设置域名及备案？  如何在阿里云部署织梦网站？  建站之星上传入口如何快速找到？  天河区网站制作公司,广州天河区如何办理身份证？需要什么资料有预约的网站吗？  装修招标网站设计制作流程,装修招标流程？  Python如何创建带属性的XML节点  如何制作公司的网站链接,公司想做一个网站，一般需要花多少钱？  东莞专业网站制作公司有哪些,东莞招聘网站哪个好？  黑客如何利用漏洞与弱口令入侵网站服务器？  定制建站模板如何实现SEO优化与智能系统配置？18字教程  C#怎么使用委托和事件 C# delegate与event编程方法  建站之星后台管理如何实现高效配置？  rsync同步时出现rsync: failed to set times on “xxxx”: Operation not permitted  如何选择域名并搭建高效网站？  青岛网站建设如何选择本地服务器？  高防服务器租用如何选择配置与防御等级？  网站设计制作企业有哪些,抖音官网主页怎么设置？  音响网站制作视频教程,隆霸音响官方网站？  C#如何序列化对象为XML XmlSerializer用法  网站制作外包价格怎么算,招聘网站上写的“外包”是什么意思？  如何在企业微信快速生成手机电脑官网？  建站之星如何修改网站生成路径？  合肥制作网站的公司有哪些,合肥聚美网络科技有限公司介绍？  测试制作网站有哪些,测试性取向的权威测试或者网站？