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实现心算练习代码
Dec 06 Javascript
js页面跳转的常用方法整理
Oct 18 Javascript
使用AngularJS编写较为优美的JavaScript代码指南
Jun 19 Javascript
深入解读JavaScript中的Iterator和for-of循环
Jul 28 Javascript
js实现input密码框提示信息的方法(附html5实现方法)
Jan 14 Javascript
简单实现js选项卡切换效果
Feb 03 Javascript
jQuery Mobile 触摸事件实例
Jun 04 Javascript
javascript封装addLoadEvent实现页面同时加载执行多个函数的方法
Jul 25 Javascript
JavaScript高仿支付宝倒计时页面及代码实现
Oct 21 Javascript
JS利用正则表达式实现简单的密码强弱判断实例
Jun 16 Javascript
BootStrap selectpicker后台动态绑定数据的方法
Jul 28 Javascript
浅谈React中的元素、组件、实例和节点
Feb 27 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
PHP脚本的10个技巧(4)
2006/10/09 PHP
php_imagick实现图片剪切、旋转、锐化、减色或增加特效的方法
2014/12/15 PHP
PHP运用foreach神奇的转换数组(实例讲解)
2018/02/01 PHP
如何在Laravel5.8中正确地应用Repository设计模式
2019/11/26 PHP
如何在PHP环境中使用ProtoBuf数据格式
2020/06/19 PHP
javascript 多浏览器 事件大全
2010/03/23 Javascript
JavaScript ( (__ = !$ + $)[+$] + ({} + $)[_/_] +({} + $)[_/_] )
2011/02/25 Javascript
Jquery结合HTML5实现文件上传
2015/06/25 Javascript
基于Bootstrap实现下拉菜单项和表单导航条(两个菜单项,一个下拉菜单和登录表单导航条)
2016/07/22 Javascript
手机端实现Bootstrap简单图片轮播效果
2016/10/13 Javascript
Node.js安装配置图文教程
2017/05/10 Javascript
浅谈webpack下的AOP式无侵入注入
2017/11/12 Javascript
解决Jquery下拉框数据动态获取的问题
2018/01/25 jQuery
利用vscode调试编译后的js代码详解
2018/05/14 Javascript
Node.js进阶之核心模块https入门
2018/05/23 Javascript
VuePress 中如何增加用户登录功能
2019/11/29 Javascript
js闭包和垃圾回收机制示例详解
2021/03/01 Javascript
[01:17:55]VGJ.T vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/20 DOTA
利用python生成一个导出数据库的bat脚本文件的方法
2016/12/30 Python
Python实现桶排序与快速排序算法结合应用示例
2017/11/22 Python
python实现俄罗斯方块游戏
2020/03/25 Python
浅谈keras的深度模型训练过程及结果记录方式
2020/01/24 Python
在Keras中实现保存和加载权重及模型结构
2020/06/15 Python
python中如何写类
2020/06/29 Python
浅析Python中字符串的intern机制
2020/10/03 Python
亚马逊巴西站:Amazon.com.br
2019/09/22 全球购物
如何在C# winform中异步调用web services
2015/09/21 面试题
如何利用cmp命令比较文件
2013/09/23 面试题
历史专业个人求职信分享
2013/12/20 职场文书
学子宴答谢词
2014/01/25 职场文书
小学三年级学生评语
2014/04/22 职场文书
国家奖学金获奖感言
2014/08/16 职场文书
2014年全国法制宣传日宣传活动方案
2014/11/02 职场文书
python通配符之glob模块的使用详解
2021/04/24 Python
MySQL中distinct与group by之间的性能进行比较
2021/05/26 MySQL
http通过StreamingHttpResponse完成连续的数据传输长链接方式
2022/02/12 Python