这篇文章主要为大家展示了“Vue路由History mode模式中页面无法渲染怎么办”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“Vue路由History mode模式中页面无法渲染怎么办”这篇文章吧。

专注于为中小企业提供网站建设、成都网站建设服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业犍为免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了上1000家企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。

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

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

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路由History mode模式中页面无法渲染怎么办”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联成都网站设计公司行业资讯频道！

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

网页名称：Vue路由Historymode模式中页面无法渲染怎么办-创新互联
文章起源：http://ybzwz.com/article/dipcdo.html