问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
vue-router改为history模式后，需要后台服务器配置一些东西，不然访问
/user/id ，就会出现404错误。但是我现在却连首页无法渲染出来，代码看起来已经加载完成，却还是一片空白。这种情况是正常情况吗？（暂时后台服务器还没有配置官网说的那些代码）
我现在的前端代码放在html文件夹里，也就是说这样才可以访问 /html/。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
hash mode的时候，#号后面的所有内容，服务器是不处理的，然后被index.html捕获了，通过index.html里的Vue-router插件解析，分配到对应的视图
history mode的时候，由于没有了#号，所以服务器优先处理URL，整个地址包括原来#号后面不处理的部分，也都是交由服务器路由处理了，所以服务器默认会去对应的地址找文件
然而，服务器上根本没有这个文件，hash mode下，这个路径是由index.html里的vue-router分配的视图显示出来的，而服务器找不到对应的文件，就报错404了
你这个看起来并不正常，因为看起来是打开了index.html，但是原本#后面的部分，没有成功传给index.html
服务器的配置，需要匹配到原本#后面对应的地方，然后转发给index.html，这样，才能被index.html里面的vue-router识别，从而分配到对应的视图上面去
分享到微博？
Hi，欢迎来到 SegmentFault 技术社区！⊙▽⊙ 在这里，你可以提出编程相关的疑惑，关注感兴趣的问题，对认可的回答投赞同票；大家会帮你解决编程的问题，和你探讨技术更新，为你的回答投上赞同票。
明天提醒我
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：4203人阅读
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阶段一切都是正常的，可是打包之后，访问项目路径：
会发现页面一片空白，但是静态文件都能够正常的引用，因为使用了YII中的模块，所以除了域名之外，还会带有driver模块名。一般很多人创建的项目都放在了根目录下面，也就是：
这样的一种形式，没问题。可是如果配置了模块，或者放置在了子文件夹下面，那么就会出问题。其实，这是因为router无法找到路径中的组件，所以也就无法渲染了。只需要修改router中的index.js，在每个path中加上你项目名称就行了，这样就能够成功了。
最后的页面效果：
在History mode下，如果直接通过地址栏访问路径，那么会出现404错误，这是因为这是单页应用（废话）…其实是因为调用了history.pushState API 所以所有的跳转之类的操作都是通过router来实现的，解决这个问题很简单，只需要在后台配置如果URL匹配不到任何静态资源，就跳转到默认的index.html。具体配置如下：
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
location / {
try_files $uri $uri/ /index.
关于每次点击链接都要刷新页面的问题
众所周知，开发单页应用就是因为那丝般顺滑的体验效果，如果每次点击都会刷新页面…
出现这个的原因是因为使用了window.location来跳转，只需要使用使用router提供的方法，就能够解决这个问题：
在main.js中配置中将router绑定到全局
Vue.prototype.router = router
之后都使用如下的方式来控制跳转
this.router.push('driver/service');
好啦，这次关于Vue路由的“坑”就介绍到这里了，以后会发表更多的优质文章，如果对你有所帮助，请点击赞，谢谢。
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：43613次
排名：千里之外
原创：28篇
阅读：1842
(3)(3)(2)(4)(2)(2)(3)(4)(3)(8)
(window.slotbydup = window.slotbydup || []).push({
id: '4740887',
container: s,
size: '250,250',
display: 'inlay-fix'问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
因为在eagle201510项目下面有很多子项目，尝试了多种配置方法都不能共存
我希望是这样的：
server_name
192.168.10.91;
"E:/UED/eagle/branch/eagle201510";
location / {
index.html index.htm index.
location ^~ /m-example/ {
"E:/UED/eagle/branch/eagle201510/m-example";
try_files $uri $uri/ /index.html =404;
location ~ \.php(.*)$ {
fastcgi_pass
127.0.0.1:9000;
fastcgi_index
fastcgi_split_path_info
^((?U).+\.php)(/?.+)$;
fastcgi_param
SCRIPT_FILENAME
$document_root$fastcgi_script_
fastcgi_param
$fastcgi_path_
fastcgi_param
PATH_TRANSLATED
$document_root$fastcgi_path_
m-example目录是使用vue-router开发的单页应用，需要单独配置，但这种方式m-example并不能正常加载加载的js，css都变成了htmlconsole
vendors.js:1 Uncaught SyntaxError: Unexpected token &
main.js:1 Uncaught SyntaxError: Unexpected token &
index.html:6 Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://192.168.10.91/m-example/dist/main.css".
如果配置改成这样：
server_name
192.168.10.91;
"E:/UED/eagle/branch/eagle201510";
location / {
"E:/UED/eagle/branch/eagle201510/m-example";
try_files $uri $uri/ /index.html =404;
location ~ \.php(.*)$ {
fastcgi_pass
127.0.0.1:9000;
fastcgi_index
fastcgi_split_path_info
^((?U).+\.php)(/?.+)$;
fastcgi_param
SCRIPT_FILENAME
$document_root$fastcgi_script_
fastcgi_param
$fastcgi_path_
fastcgi_param
PATH_TRANSLATED
$document_root$fastcgi_path_
就正常了。但是其它项目又无法访问了。。。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
添加一个server配置项解决，如下：
server_name
"E:/UED/eagle/branch/eagle201510/m-example";
location / {
try_files $uri $uri/ /index.html =404;
分享到微博？
你好！看起来你挺喜欢这个内容，但是你还没有注册帐号。 当你创建了帐号，我们能准确地追踪你关注的问题，在有新答案或内容的时候收到网页和邮件通知。还能直接向作者咨询更多细节。如果上面的内容有帮助，记得点赞 (????)? 表示感谢。
明天提醒我
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
vue-cli 创建vue 项目的话自带vue-router 不用配置啊
还是说你把router文件改了 如果是这个你要先import vue文件
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
你的意思是当前路径对应的模板没有渲染还是你的路径有问题，还是路径对应的模板本来就没有视图
同步到新浪微博
分享到微博？
你好！看起来你挺喜欢这个内容，但是你还没有注册帐号。 当你创建了帐号，我们能准确地追踪你关注的问题，在有新答案或内容的时候收到网页和邮件通知。还能直接向作者咨询更多细节。如果上面的内容有帮助，记得点赞 (????)? 表示感谢。
明天提醒我
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：