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 相关文章推荐
document.body.scrollTop 值总为0的解决方法 比较常见的标准问题
Nov 30 Javascript
基于jQuery的history历史记录插件
Dec 11 Javascript
简单的邮箱登陆的提示效果类似于yahoo邮箱
Feb 26 Javascript
jQuery隐藏和显示效果实现
Apr 06 Javascript
Angular js 实现添加用户、修改密码、敏感字、下拉菜单的综合操作方法
Oct 24 Javascript
Bootstrap modal只加载一次数据的解决办法(推荐)
Nov 24 Javascript
实例教学如何写vue插件
Nov 30 Javascript
angularJs 表格添加删除修改查询方法
Feb 27 Javascript
webpack v4 从dev到prd的方法
Apr 02 Javascript
微信小程序与webview交互实现支付功能
Jun 07 Javascript
jQuery实现放大镜案例
Oct 19 jQuery
微信小程序实现星星评分效果
Nov 01 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中的integer类型使用分析
2010/07/27 PHP
使用php发送有附件的电子邮件-(PHPMailer使用的实例分析)
2013/04/26 PHP
php htmlspecialchars()与shtmlspecialchars()函数的深入分析
2013/06/05 PHP
解析PHP生成静态html文件的三种方法
2013/06/18 PHP
PHP易混淆知识整理笔记
2015/09/24 PHP
PHP实现的自定义图像居中裁剪函数示例【测试可用】
2017/08/11 PHP
PHP实现双链表删除与插入节点的方法示例
2017/11/11 PHP
php写入mysql中文乱码的实例解决方法
2019/09/17 PHP
php给数组赋值的实例方法
2019/09/26 PHP
html读出文本文件内容
2007/01/22 Javascript
JS代码优化技巧之通俗版(减少js体积)
2011/12/23 Javascript
jQuery事件绑定和委托实例
2014/11/25 Javascript
JS+CSS实现Div弹出窗口同时背景变暗的方法
2015/03/04 Javascript
JavaScript实现倒计时代码段Item1(非常实用)
2015/11/03 Javascript
javascript实现计时器的简单方法
2016/02/21 Javascript
简洁实用的BootStrap jQuery手风琴插件
2016/08/31 Javascript
JS判断浏览器是否安装flash插件的简单方法
2016/09/13 Javascript
原生js的RSA和AES加密解密算法
2016/10/08 Javascript
深入理解Node.js的HTTP模块
2016/10/12 Javascript
seajs学习教程之基础篇
2016/10/20 Javascript
js 轮播效果实例分享
2016/12/28 Javascript
微信小程序的分类页面制作
2017/06/27 Javascript
jQuery 开发之EasyUI 添加数据的实例
2017/09/26 jQuery
Bootstrap Table实现定时刷新数据的方法
2018/08/13 Javascript
[01:14:35]DOTA2上海特级锦标赛B组资格赛#1 Alliance VS Fnatic第一局
2016/02/26 DOTA
python获取文件版本信息、公司名和产品名的方法
2014/10/05 Python
详解python分布式进程
2018/10/08 Python
Python HTMLTestRunner测试报告view按钮失效解决方案
2020/05/25 Python
python 解决函数返回return的问题
2020/12/05 Python
美国受欢迎的女性牛仔裤品牌:DL1961
2016/11/12 全球购物
学校办公室主任职责
2013/12/27 职场文书
大学生涯自我鉴定
2014/01/16 职场文书
七年级生物教学反思
2014/01/30 职场文书
2015年大学元旦晚会活动策划书
2014/12/09 职场文书
市场部岗位职责
2015/02/12 职场文书
工作简报格式范文
2015/07/21 职场文书