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匹配不到任何静态资源，就跳转到默认的。具体配置如下：
apache
我要评论
<ifmodule mod_rewrite.c>
rewriteengine on
rewritebase /
rewriterule ^index\.html$ - [l]
rewritecond %{request_filename} !-f
rewritecond %{request_filename} !-d
rewriterule . / [l]
</ifmodule>
nginx
location / {
try_files $uri $uri/ /;
}
node.js (express)
关于每次点击链接都要刷新页面的问题
众所周知，开发单页应用就是因为那丝般顺滑的体验效果，如果每次点击都会刷新页面…
出现这个的原因是因为使用了window.location来跳转，只需要使用使用router提供的方法，就能够解决这个问题：
在main.js中配置中将router绑定到全局
vue.prototype.router = router;
之后都使用如下的方式来控制跳转
this.router.push('driver/service');
好啦，这次关于vue路由的“坑”就介绍到这里了，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
如对本文有疑问， 点击进行留言回复！！
蒲公英 · JELLY技术周刊 Vol.14: Vue 3 新特性详解
keepalived+haproxy+mycat+mysql高可用搭建配制
vue中子组件的created、mounted生命周期钩子中获取不到props中的值问题
网友评论