190115_Vue下路由History mode导致页面无法渲染的原因

https://blog.csdn.net/xjlinme/article/details/74783887

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

index.js

最后的页面效果：

效果图
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>

1
    2
    3
    4
    5
    6
    7
    8

nginx

location / {
try_files $uri $uri/ /index.html;
}

1
2
3

Node.js (Express)
关于每次点击链接都要刷新页面的问题

众所周知，开发单页应用就是因为那丝般顺滑的体验效果，如果每次点击都会刷新页面…
出现这个的原因是因为使用了window.location来跳转，只需要使用使用router提供的方法，就能够解决这个问题：

在main.js中配置中将router绑定到全局

Vue.prototype.router = router;

之后都使用如下的方式来控制跳转

this.router.push('driver/service');

好啦，这次关于Vue路由的“坑”就介绍到这里了，以后会发表更多的优质文章，如果对你有所帮助，请点击赞，谢谢。
---------------------
作者：ArtisanLin
来源：CSDN
原文：https://blog.csdn.net/xjlinme/article/details/74783887
版权声明：本文为博主原创文章，转载请附上博文链接！

190115_Vue下路由History mode导致页面无法渲染的原因相关推荐

新来的前端小姐姐问：Vue路由history模式刷新页面出现404问题
摘要:vue-router 默认 hash 模式 -- 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载. 本文分享自华为云社区<学习Vue Rou ...
vue 打包路由报错_Vue下路由History模式打包后页面空白的解决方法
vue的路由在默认的hash模式下,默认打包一般不会有什么问题,不过hash模式由于url会带有一个#,不美观,而且在微信分享,授权登录等都会有一些坑.所以history模式也会有一些应用场景.新手往 ...
vue router 原生html,Vue router 使用 History 模式导致页面请求 404
vue-router 默认 hash 模式 -- 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载. 如果不想要很丑的 hash,我们可以用路由的 his ...
vue路由history模式刷新页面时页面丢失时常见的两种解决方法
方法一: 1 2 3 4 5 6 7 8 location /{ root /data/nginx/html; index index.html index.htm; i ...
前端--导致页面白屏的原因
JS问题常用框架Vue React Angular都是依靠JS进行驱动, 并且单页面的应用html也是依靠JS生成,在渲染页面的时候需要加载很大的JS文件,在JS解析加载完成之前无法展示页面,从而导 ...
小程序setData设置数据超过1024kb页面不渲染
微信小程序中,平常获取列表的分页数据时,会把当前页数据和之前的数据通过concat方法做个拼接,再使用setData方法更新数据.当数据量较大时,会超过setData单次设置量1024kb的限制,进而 ...
vue-router路由history模式+nginx部署项目到非根目录下(实践版)
你总是心太软心太软独自一个人研究到天亮你无怨无悔的疯狂找寻我知道你根本没那么坚强你总是心太软心太软把所有问题都自己扛问题总是太多解决太难不是你的就别再勉强夜深了你还不想睡你还在想着他 ...
html5新特性：利用history的pushState等方法来解决使用ajax导致页面后退和前进的问题
html5新特性:利用history的pushState等方法来解决使用ajax导致页面后退和前进的问题参考文章: (1)html5新特性:利用history的pushState等方法来解决使用aj ...
当 el-form 组件下只有一个 el-input 组件时，按回车键会导致页面刷新
当 el-form 组件下只有一个 el-input 组件时,按回车键会导致页面刷新的问题可能是由于浏览器默认的表单提交行为所导致的.解决此问题的一种方法是使用 @submit.native.prev ...
解决IE浏览器下路由变化页面不更新问题
解决IE浏览器下路由变化页面不更新问题年前做的一个vue项目,利用router控制页面切换,切换的页面内容都是通过iframe标签嵌套展示,chrome下切换时访问正常,但是在IE浏览器出现了一个奇 ...

190115_Vue下路由History mode导致页面无法渲染的原因

190115_Vue下路由History mode导致页面无法渲染的原因相关推荐

最新文章

热门文章