Vue的两种路由模式

Posted 2023-03-31

参考技术A 因为hash发生变化的url都会被浏览器记录下来，从而你会发现浏览器的前进后退都可以用

包括back,forward,go三个方法，对应浏览器的前进，后退，跳转操作，有同学说了，(谷歌)浏览器只有前进和后退，没有跳转，嗯，在前进后退上长按鼠标，会出来所有当前窗口的历史记录，从而可以跳转(也许叫跳更合适)：

修改历史状态
包括了history.pushState(),history.replaceState()两个方法,这两个方法接收三个参数:stateObj,title,url

history.forward();
通过pushstate把页面的状态保存在state对象中，当页面的url再变回这个url时，可以通过event.state取到这个state对象.

通过history api，我们丢掉了丑陋的#，但是它也有个毛病：
不怕前进，不怕后退，就怕刷新，f5（如果后端没有准备的话）,因为刷新是实实在在地去请求服务器的,不玩虚的。

在hash模式下，前端路由修改的是#中的信息，而浏览器请求时是不带它玩的，所以没有问题.但是在history下，你可以自由的修改path，当刷新时，如果服务器中没有相应的响应或者资源，会分分钟刷出一个404来。

所以，如果你想在github.io上搭一个单页博客，就应该选择hash模式，如果要选择history，就要和后端配合，在刷新页面时，若未找到路由，则返回首页。

Vue 路由router的两种模式

两种模式

vue中router可以设两种模式：hash和history。设置方式就是代码中注释的部分。

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router(
  // mode: 'history',
  routes: [
    
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    
  ]
)

默认是hash模式。

• 如果使用hash模式，url中就会存在“#“符号，这个符号后面的是路径。

比如我们访问http://localhost:8080/ ，会看到浏览器自动添加成http://localhost:8080/#/

如果我们要访问"/test"路径，则url为http://localhost:8080/#/test ，而http://localhost:8080/test 不可以

• 如果使用history，则url没有“#“符号，路径与传统网址一样，如http://localhost:8080/和http://localhost:8080/test

但是这只是表面现象，这两种模式本质的区别是什么？

history模式

先理解hash模式，就先要知道history模式，因为hash模式是解决问题出现，知道问题是什么就很容易理解hash模式。

history模式就是我们传统的路径，url中的路径就是服务端根目录下的相对路径，是真实路径。

比如http://localhost:8080/test/123.html ，则就需要在根目录下有test文件夹，文件夹下有123.html这个文件。

但是如果我们没有这个文件，而是用vue这种router的方式呢？

那么就必须用nginx代理，否则找不到这个文件就是返回404。

这样就需要在nginx中配置每一个route，漏下一个就会404

所以history模式下的路由分发是服务端（nginx）来做的

hash模式

为了解决上面的问题，hash模式出现了。在hash模式的url中“#“符号后面的路径并不是真实路径，而是以类似参数的形式传给默认文件。

默认文件就是index，在这里通过“#“符号后面的路径去匹配路由处理，所以只要有index这一个文件是真实路径就可以。

这样就不需要在nginx一个个配置了。

这样hash模式下的路由分发就不需要服务端来做了，直接在前端就处理了。