vue-router的HTML5 History 模式设置

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服务器下的一种解决方案，至于别的服务器应该也是同理的。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue-router两种模式区别及使用注意事项详解

    本文实例讲述了vue-router两种模式区别及使用注意事项.分享给大家供大家参考,具体如下: Vue Router 是Vue官方的路由管理器.它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌.vue-router 默认 hash 模式,还有一种是history模式. hash模式 hash模式的工作原理是hashchange事件,可以在window监听hash的变化.我们在url后面随便添加一个#xx触发这个事件. window.onhashchange = function(

  • 浅谈vue项目4rs vue-router上线后history模式遇到的坑

    此次项目开发完后准备打包,因为hash模式的路径带#看着实在是有点丑,所以采用history模式.因为本次项目属于以前网站重构,但是seo问题,所以需要以前的一些地址路径写,所以vue-router的路径全部重改了.打包后查了网上一大堆,都说要把config里的index.js 里的build里的 assetsPublicPath: '/'改成'./',打包上线发现在hash模式下是没问题的, 但一旦改成history模式,有些动态js文件的路径都是错的.无奈之下死马当活马医,把'./'改回了'

  • vue 项目打包通过命令修改 vue-router 模式 修改 API 接口前缀

    需求说明: 在开发 vue 项目的过程中遇到的需求是要把 api 接口前缀暴露在命令行,通过 npm run build apiUrl 即可修改接口入口,用于从 docker 部署到不同的测试服务器上,其次是路由模式的问题,部署到测试服务器上的需要是 history 模式,但是产品是用 electron + vue 开发的桌面应用,electron 硬性要求 vue-router 的路由模式是 hash 模式,所以命令行需新增一个配置项 mode ,mode 可选值有 history .hash

  • Vue-Router模式和钩子的用法

    上一篇主要写了一下vuer-router的基本使用,可以说解决温饱了,下面就再来点下午茶吧 模式 vue-router中的模式选项主要在router实例化的时候进行定义的,如下 const router = new VueRouter({ mode: 'history', // 两种类型history 还有 hash routes: routes // 可以缩写成routes }) 有两种模式可供选择,history 和 hash,大致对比一下, 模式 优点 缺点 hash 使用简单.无需后台支

  • vue-router启用history模式下的开发及非根目录部署方法

     为什么要有 hash 和 history 对于 Vue 这类渐进式前端开发框架,为了构建 SPA(单页面应用),需要引入前端路由系统,这也就是 Vue-Router 存在的意义.前端路由的核心,就在于 -- 改变视图的同时不会向后端发出请求. 为了达到这一目的,浏览器当前提供了以下两种支持: 1.hash -- 即地址栏 URL 中的 # 符号(此 hash 不是密码学里的散列运算). 比如这个 URL:http://www.abc.com/#/hello,hash 的值为 #/hello.它

  • Vue-router 中hash模式和history模式的区别

    Vue-router 中hash模式和history模式的关系 在vue的路由配置中有mode选项 最直观的区别就是在url中 hash 带了一个很丑的 # 而history是没有#的 mode:"hash";   mode:"history"; hash模式和history模式的不同 对于vue这类渐进式前端开发框架,为了构建 SPA(单页面应用),需要引入前端路由系统,这也就是 Vue-Router 存在的意义.前端路由的核心,就在于 -- 改变视图的同时不会向

  • 一文了解vue-router之hash模式和history模式

    当前版本: 3.0.3 类目录: src/history/base.js hash模式 即地址栏 URL 中的 # 符号(此 hash 不是密码学里的散列运算).比如这个 URL: http://www.abc.com/#/hello ,hash 的值为 #/hello.它的特点在于:hash 虽然出现在 URL 中,但不会被包括在 HTTP 请求中,对后端完全没有影响,因此改变 hash 不会重新加载页面. history模式 利用了 HTML5 History Interface 中新增的

  • vue-router的两种模式的区别

    vue-router的两种模式的区别

    1.大家都知道vue是一种单页应用,单页应用就是仅在页面初始化的时候加载相应的html/css/js一单页面加载完成,不会因为用户的操作而进行页面的重新加载或者跳转,用javascript动态的变化html的内容 优点: 良好的交互体验,用户不需要刷新页面,页面显示流畅, 良好的前后端工作分离模式,减轻服务器压力, 缺点: 不利于SEO,初次加载耗时比较多 2.hash模式 vue-router默认的是hash模式-使用URL的hash来模拟一个完整的URL,于是当URL改变的时候,页面不会重新

  • vue vue-Router默认hash模式修改为history需要做的修改详解

    主要是因为活动页会存在pc端的时候未登录的用户也需要访问的问题,因为未登录用户在活动页面进行操作的时候会触发到登录事件,然后我们实现的方式是通过接口来判断,该接口标记的是一个upn的值 然后登录的时候是单点登录,不知道是否回调地址不支持vue形式下hash模式的路由,因而自动忽视了后面的#路径 然后我查了一下一般回调以后#后都会默认为书签,我转义了然而还是只能职别#之前的路径 由于不是很清楚登录单点那一块而且他们暂时实现没有什么业务问题(当然开始~~就是不稳定,现在有时候还是会有不稳定的问题)所

  • vue-router中的hash和history两种模式的区别

    众所周知,vue-router有两种模式,hash模式和history模式,这里来谈谈两者的区别. hash模式 hash模式背后的原理是onhashchange事件,可以在window对象上监听这个事件: window.onhashchange = function(event){ console.log(event.oldURL, event.newURL); let hash = location.hash.slice(1); document.body.style.color = has

  • vue-router history模式下的微信分享小结

    背景 旧项目改造,进行前后端分离.做成了spa,为了保证后端路由时期链接可用性,使用了history模式. 因为不同的页面有不同的分享内容,所以每次路由都要重新进行wx.config/wx.ready调用 微信分享遇到的坑 微信官方文档上有下面一段话: 所有需要使用JS-SDK的页面必须先注入配置信息,否则将无法调用(同一个url仅需调用一次,对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支持pushState的H5新特性,所以使用pushSt

随机推荐