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 相关文章推荐
javaScript 判断字符串是否为数字的简单方法
Jul 25 Javascript
一些常用的JavaScript函数(json)附详细说明
May 25 Javascript
js实现从数组里随机获取元素
Jan 12 Javascript
jQuery实现在textarea指定位置插入字符或表情的方法
Mar 11 Javascript
javascript中tostring()和valueof()的用法及两者的区别
Nov 16 Javascript
js 动态给元素添加、移除事件的实现方法
Jul 19 Javascript
JavaScript学习笔记整理_关于表达式和语句
Sep 19 Javascript
vue语法之拼接字符串的示例代码
Oct 25 Javascript
详解微信小程序开发(项目从零开始)
Jun 06 Javascript
node.js使用yargs处理命令行参数操作示例
Feb 11 Javascript
vuex的使用步骤
Jan 06 Vue.js
vue本地构建热更新卡顿的问题“75 advanced module optimization”完美解决方案
Aug 05 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
smarty section简介与用法分析
2008/10/03 PHP
fleaphp rolesNameField bug解决方法
2011/04/23 PHP
PHP 信号管理知识整理汇总
2017/02/19 PHP
常见的5个PHP编码小陋习以及优化实例讲解
2021/02/27 PHP
JavaScript异步调用定时方法并停止该方法实现代码
2012/03/16 Javascript
jQuery实现鼠标移到元素上动态提示消息框效果
2013/10/20 Javascript
jquery ajax对特殊字符进行转义防止js注入使用示例
2013/11/21 Javascript
js实现局部页面打印预览原理及示例代码
2014/07/03 Javascript
浅析JavaScript中的事件机制
2015/06/04 Javascript
js实现input框文字动态变换显示效果
2015/08/19 Javascript
jQuery 检查某个元素在页面上是否存在实例代码
2016/10/27 Javascript
javascript中活灵活现的Array对象详解
2016/11/30 Javascript
JS闭包用法实例分析
2017/03/27 Javascript
微信小程序 图片宽度自适应的实现
2017/04/06 Javascript
js构建二叉树进行数值数组的去重与优化详解
2018/03/26 Javascript
Js面试算法详解
2018/04/08 Javascript
详解基于Vue/React项目的移动端适配方案
2019/08/23 Javascript
vue-froala-wysiwyg 富文本编辑器功能
2019/09/19 Javascript
jQuery实现轮播图源码
2019/10/23 jQuery
JS常见内存泄漏及解决方案解析
2020/05/30 Javascript
python中threading超线程用法实例分析
2015/05/16 Python
python urllib爬取百度云连接的实例代码
2017/06/19 Python
详解Python 调用C# dll库最简方法
2019/06/20 Python
使用Python自动生成HTML的方法示例
2019/08/06 Python
tensorflow实现打印ckpt模型保存下的变量名称及变量值
2020/01/04 Python
python批量修改xml属性的实现方式
2020/03/05 Python
Python网络爬虫四大选择器用法原理总结
2020/06/01 Python
Python scrapy爬取小说代码案例详解
2020/07/09 Python
斯洛伐克时尚服装网上商店:Cellbes
2016/10/20 全球购物
实习教师自我鉴定
2013/12/09 职场文书
毕业生实习期转正自我鉴定
2014/09/26 职场文书
在教室放鞭炮的检讨书
2014/09/28 职场文书
2014年光棍节活动策划方案(创意集锦)
2014/09/29 职场文书
心理健康教育主题班会
2015/08/13 职场文书
2016年优秀党员教师先进事迹材料
2016/02/29 职场文书
MySQL 外键约束和表关系相关总结
2021/06/20 MySQL