vue-router的HTML5 History 模式设置


Posted in Javascript onSeptember 08, 2018

VUE是当下最火爆的前端框架之一,vue-router是vue项目中几乎都会用到的组件,然而体验一时爽,其实坑不少。本篇经验将详细介绍vue-router的两种mode效果和开发测试环境下的问题,并给出解决方案。

vue-router的HTML5 History 模式,这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。

const router = new VueRouter({
 mode: 'history',
 routes: [...]
})

当你使用 history 模式时,URL 就像正常的 url,例如 http://yoursite.com/user/id, 就是长这样的!

不过这种模式要玩好,还需要后台配置支持。因为我们的应用是个单页客户端应用,如果后台没有正确的配置,当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404,这就尴尬了。

所以,你要在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html 页面,这个页面就是你 app 依赖的页面。

目前后端服务器有Apache、nginx、原生 Node.js、基于 Node.js 的 Express、Internet Information Services (IIS)、Caddy、Firebase 主机等。

先给一个官方标准版配置的传送门,请戳这里→ https://router.vuejs.org/zh/guide/essentials/history-mode.html

既然是官方给出的配置,那肯定就会说的很官方咯~

按照官方给出的示例,将道理是成功的,但是官方给出的只局限于这个项目在服务器的根目录下!
如果你的项目没有放在根目录下,那么就是这么的不讲道理。

下面是在实际开发中碰到的问题。

我们的后端服务器是nginx,所以按照官方的给出的配置,找到nginx.conf,照抄代码,修改完后重启服务器,讲道理是成功的。

server
{
  listen 80;
  server_name oursite.com;
  location /test/ {      
    alias /usr/local/test/;
    index index.htm index.html;
    #上面的就是一些常规配置,下面这个才是重点
    try_files $uri $uri/ /index.html;

    #这里没有采用官方给出处理404错误页面的方案
    #方案一(把所有没有后缀名的请求如果404都跳转到index.html,我们没有采用)
    #error_page 404 /test/index.html;

    #方案二(404的方式,不是特别完美。会有浏览器留下404的状态(容易被第三方劫持),以下方式可以避免被第三方劫持!)
    if (!-e $request_filename) {
      rewrite ^/(.*) /test/index.html last;
      break;
    }
  }
}

但是,事实就是这么的不讲道理,我们并没有成功!这就令人很是郁闷了,心中一万只神兽羊驼,奔腾而过~ 为什么没有成功呢,都是按部就班做的呀,完全不讲道理!

而真相只有一个,那就是~~~

路由文件中的路径有问题

const router = new VueRouter({
 mode: 'history',
 routes: [
  { path: '/test/', component: YourComponent },
  { path: '/test/a', component: YourComponent },
  { path: '/test/b:x', component: YourComponent }
 ]
})

在路由文件中所有的路径前面加上服务器下项目所在的文件名即可,当然也包括<router-link>和this.$router.push()中的路径,不然又是不讲道理的。

这只是在nginx服务器下的一种解决方案,至于别的服务器应该也是同理的。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js实现iframe动态调整高度的代码
Jan 06 Javascript
心扬JS分页函数代码
Sep 10 Javascript
jquery 插件学习(四)
Aug 06 Javascript
js模糊查询实例分享
Dec 26 Javascript
简单实现js拖拽效果
Jul 25 Javascript
基于JavaScript实现评论框展开和隐藏功能
Aug 25 Javascript
jQuery实现文件编码成base64并通过AJAX上传的方法
Apr 12 jQuery
微信小程序实现Session功能及无法获取session问题的解决方法
May 07 Javascript
微信小程序修改数组长度的问题的解决
Dec 17 Javascript
基于ts的动态接口数据配置的详解
Dec 18 Javascript
微信小程序分享小程序码的生成(带参数)以及参数的获取
Mar 25 Javascript
vue+springboot实现登录验证码
May 27 Vue.js
vue移动端下拉刷新和上拉加载的实现代码
Sep 08 #Javascript
react 父子组件之间通讯props
Sep 08 #Javascript
js代码规范之Eslint安装与配置详解
Sep 08 #Javascript
vue弹窗插件实战代码
Sep 08 #Javascript
浅谈从React渲染流程分析Diff算法
Sep 08 #Javascript
详解Webpack-dev-server的proxy用法
Sep 08 #Javascript
详解Ubuntu安装angular-cli遇到的坑
Sep 08 #Javascript
You might like
linux下 C语言对 php 扩展
2008/12/14 PHP
简单解析PHP程序的运行流程
2016/06/23 PHP
PHP实现多图上传(结合uploadify插件)思路分析
2016/11/30 PHP
PHP快速导出百万级数据到CSV或者EXCEL文件
2020/11/27 PHP
JXTree对象,读取外部xml文件数据,生成树的函数
2007/04/02 Javascript
学习javascript,实现插入排序实现代码
2011/07/31 Javascript
一个简单的网站访问JS计数器 刷新1次加1次访问
2012/09/20 Javascript
js解析与序列化json数据(三)json的解析探讨
2013/02/01 Javascript
javascript与jquery中跳出循环的区别总结
2013/11/04 Javascript
基于jQuery实现最基本的淡入淡出效果实例
2015/02/02 Javascript
jquery简单实现带渐显效果的选项卡菜单代码
2015/09/01 Javascript
JavaScript电子时钟倒计时第二款
2016/01/10 Javascript
js添加事件的通用方法推荐
2016/05/15 Javascript
深入浅析JavaScript的API设计原则
2016/06/14 Javascript
如何利用JSHint减少JavaScript的错误
2016/08/23 Javascript
jQuery 选择器(61种)整理总结
2016/09/26 Javascript
JavaScript数据结构中串的表示与应用实例
2017/04/12 Javascript
Bootstrap fileinput 上传新文件移除时触发服务器同步删除的配置
2018/10/08 Javascript
微信小程序云开发之云函数详解
2019/05/16 Javascript
微信小程序onShareTimeline()实现分享朋友圈
2021/01/07 Javascript
python使用电子邮件模块smtplib的方法
2016/08/28 Python
Python爬虫:将headers请求头字符串转为字典的方法
2019/08/21 Python
Python进阶之使用selenium爬取淘宝商品信息功能示例
2019/09/16 Python
Python + Flask 实现简单的验证码系统
2019/10/01 Python
Python调用scp向服务器上传文件示例
2019/12/22 Python
使用Python实现Wake On Lan远程开机功能
2020/01/22 Python
python图形开发GUI库pyqt5的基本使用方法详解
2020/02/14 Python
Python 忽略文件名编码的方法
2020/08/01 Python
关于打架的检讨书
2014/01/17 职场文书
合作协议书
2014/04/23 职场文书
消防安全宣传口号
2014/06/10 职场文书
大学竞选班干部演讲稿
2014/08/21 职场文书
2014年小学辅导员工作总结
2014/12/23 职场文书
毕业证明模板
2015/06/19 职场文书
tensorflow中的数据类型dtype用法说明
2021/05/26 Python
浅谈sql_@SelectProvider及使用注意说明
2021/08/04 Java/Android