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 相关文章推荐
jQuery 淡出一个图像到另一个图像的实现代码
Jun 12 Javascript
JQuery弹出炫丽对话框的同时让背景变灰色
May 22 Javascript
JavaScript中的apply和call函数详解
Jul 20 Javascript
深入分析js的冒泡事件
Dec 05 Javascript
thinkphp实现无限分类(使用递归)
Dec 19 Javascript
javascript设置页面背景色及背景图片的方法
Dec 29 Javascript
微信小程序 实战小程序实例
Oct 08 Javascript
jQuery插件扩展实例【添加回调函数】
Nov 26 Javascript
Vue Ajax跨域请求实例详解
Jun 20 Javascript
vue-cli+webpack项目 修改项目名称的方法
Feb 28 Javascript
Angular8 实现table表格表头固定效果
Jan 03 Javascript
JS+canvas五子棋人机对战实现步骤详解
Jun 04 Javascript
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
用header 发送cookie的php代码
2007/03/16 PHP
Fine Uploader文件上传组件应用介绍
2013/01/06 PHP
PHP模板引擎Smarty中变量的使用方法示例
2016/04/11 PHP
用javascript动态调整iframe高度的方法
2007/03/06 Javascript
ExtJS 2.2.1的grid控件在ie6中的显示问题
2009/05/04 Javascript
javascript innerText和innerHtml应用
2010/01/28 Javascript
json数据与字符串的相互转化示例
2013/09/18 Javascript
jQuery实现点击小图显示大图代码分享
2015/08/25 Javascript
javascript编程异常处理实例小结
2015/11/30 Javascript
详解自动生成博客目录案例
2016/12/09 Javascript
javascript中this用法实例详解
2017/04/06 Javascript
解决LayUI加上form.render()下拉框和单选以及复选框不出来的问题
2019/09/27 Javascript
JavaScript对象属性操作实例解析
2020/02/04 Javascript
JavaScript实现栈结构Stack过程详解
2020/03/07 Javascript
解决Vue 移动端点击出现300毫秒延迟的问题
2020/07/21 Javascript
使用eslint和githooks统一前端风格的技巧
2020/07/29 Javascript
小程序实现上传视频功能
2020/08/18 Javascript
[00:32]2018DOTA2亚洲邀请赛出场——LGD
2018/04/04 DOTA
跟老齐学Python之编写类之三子类
2014/10/11 Python
python中使用psutil查看内存占用的情况
2018/06/11 Python
Python中turtle库的使用实例
2019/09/09 Python
4行Python代码生成图像验证码(2种)
2020/04/07 Python
Windows下Anaconda和PyCharm的安装与使用详解
2020/04/23 Python
非常漂亮的CSS3百叶窗焦点图动画
2016/02/24 HTML / CSS
西班牙第一的网上药房:PromoFarma.com
2017/04/17 全球购物
英国领先的男装设计师服装购物网站:Mainline Menswear
2018/02/04 全球购物
出纳的岗位职责
2013/11/09 职场文书
大学生职业生涯规划书
2014/03/14 职场文书
男方婚礼答谢词
2015/01/20 职场文书
2015年宣传部个人工作总结
2015/05/14 职场文书
超市店长竞聘书
2015/09/15 职场文书
2016年社区植树节活动总结
2016/03/16 职场文书
学生安全责任协议书
2016/03/22 职场文书
html css3不拉伸图片显示效果
2021/06/07 HTML / CSS
深入理解go缓存库freecache的使用
2022/02/15 Golang
Python开发五子棋小游戏
2022/04/28 Python