vue-router的两种模式的区别
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue-router的两种模式的区别相关的知识,希望对你有一定的参考价值。
参考技术Avue-router有两种模式,hash和history模式。
hash模式,默认是hash模式
hash的原理是onhashchange事件 使用URL的hash来模拟一个完整的URL,当URL改变的时候,页面不会加载,也就是单页面应用,当#后面的hash发生变化,不会导致浏览器向服务器发出请求,浏览器不发出请求就会刷新页面,并且会触发hashchange这个事件,通过监听hash值的变化来实现更新页面部分内容的操作
对于hash模式会创建hashHistory对象,在访问不同的路由的时候会发生两件事件 使用push将新路添加到路径后面后者使用replace()替换到当前的路由
history路由:
主要使用html5的pushState()和replaceState()这两个api来实现的, api分为两大部分 切换和修改,
切换历史状态:
修改历史状态:
包括了pushState,replaceState两个方法,这两个方法接收三个参数:stateObj,title,url
通过pushstate把页面的状态保存在state对象中,当页面的url再变回这个url时,可以通过event.state取到这个state对象,从而可以对页面状态进行还原,这里的页面状态就是页面字体颜色,其实滚动条的位置,阅读进度,组件的开关的这些页面状态都可以存储到state的里面。
通过history api,我们丢掉了丑陋的#,但是它也有个毛病:
不怕前进,不怕后退,就怕 刷新 , f5 ,(如果后端没有准备的话),因为刷新是实实在在地去请求服务器的,不玩虚的。
在hash模式下,前端路由修改的是#中的信息,而浏览器请求时是不带它玩的,所以没有问题.但是在history下,你可以自由的修改path,当刷新时,如果服务器中没有相应的响应或者资源,会分分钟刷出一个404来。
所以,如果你想在github上搭一个单页博客,就应该选择hash模式。
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的两种模式的区别的主要内容,如果未能解决你的问题,请参考以下文章