这篇文章主要介绍了详解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中加项目名称就行了,这样就能够成功了。

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>

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

最新资讯
iPhone XS/XS Max性能实测:傲视众Android旗舰

iPhone XS/XS Max性能

通过综合得分数据,搭载A12 Bionic的iPhone Xs和iPhone
中概股IPO疯狂下的美国韭菜:越不懂越要赌

中概股IPO疯狂下的美

中国IPO正把赌场式交易带到纽约。
下一个BAT不会是医疗服务

下一个BAT不会是医疗

医疗领域不是一个拥有很大想象力的行业,未来增长的倍数
库克再谈新iPhone高价:很值 合下来一天也就1美元

库克再谈新iPhone高价

库克表示,苹果在美国一共创造了200万个就业机会,并将在
峰瑞资本李丰:中国新零售终局猜想

峰瑞资本李丰:中国新零

全链条竞争时代来临,零售供应链如何升级?
被腾讯两次放弃的微视,还能被扶起来吗?

被腾讯两次放弃的微视

腾讯对微视的扶持不可谓不努力,这次甚至为它开放了微信
最新文章
详解NodeJs开发微信公众号

详解NodeJs开发微信公

本篇文章给大家分享了NodeJs开发微信公众号的相关技术
详解webpack4多入口、多页面项目构建案例

详解webpack4多入口、

这篇文章主要介绍了详解webpack4多入口、多页面项目构
Vue仿支付宝支付功能

Vue仿支付宝支付功能

这篇文章主要介绍了Vue仿支付宝支付功能,非常不错,具有
jquery ajaxfileuplod 上传文件 essyui laoding 效果【防止重复上传文件】

jquery ajaxfileuplod

点击一次上传, 当上传操作结束后才能操作界面,实现方式
JavaScript继承与多继承实例分析

JavaScript继承与多继

这篇文章主要介绍了JavaScript继承与多继承,结合实例
使用javascript做在线算法编程

使用javascript做在线

这篇文章主要介绍了使用javascript做在线算法编程的相