Vue 路由router的两种模式

Posted BennuCTech

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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模式下的路由分发就不需要服务端来做了,直接在前端就处理了。

以上是关于Vue 路由router的两种模式的主要内容,如果未能解决你的问题,请参考以下文章

vue-router 的两种模式的区别

vue-router的两种模式的区别

vue路由的两种模式,hash与history

vue路由的两种模式,hash与history

通过Vue路由传参的两种方式及Vue组件中接收参数的方式

通过Vue路由传参的两种方式及Vue组件中接收参数的方式