vue-router中hash模式和history模式详解
- 发布时间：
- 作者：码农之家
- 点击：127
这篇文章主要知识点是关于hash模式、history模式、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 中新增的 pushState() 和 replaceState() 方法。（需要特定浏览器支持）这两个方法应用于浏览器的历史记录栈，在当前已有的 back、forward、go 的基础之上，它们提供了对历史记录进行修改的功能。只是当它们执行修改时，虽然改变了当前的 URL，但浏览器不会立即向后端发送请求。
HTML5History实现
使用window.addEventListener('popstate')监听浏览器滚动行为，然后判断配置是否有scrollBehavior， 有就调用handleScroll方法来处理
滚动行为: 使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。 vue-router 能做到，而且更好，它让你可以自定义路由切换时页面如何滚动。
handleScroll
<!-- 等待页面渲染完才进行滚动的操作 -->
router.app.$nextTick(() => {
<!-- 初始化数据 -->
const position = getScrollPosition()
const shouldScroll = behavior.call(router, to, from, isPop ? position : null)
if (!shouldScroll) {
return
}
<!-- 判断是否是Promise,官网说支持异步 -->
if (typeof shouldScroll.then === 'function') {
shouldScroll.then(shouldScroll => {
scrollToPosition((shouldScroll: any), position)
}).catch(err => {
if (process.env.NODE_ENV !== 'production') {
assert(false, err.toString())
}
})
} else {
scrollToPosition(shouldScroll, position)
}
})
scrollToPosition
function scrollToPosition (shouldScroll, position) {
const isObject = typeof shouldScroll === 'object'
<!-- 对position进行初始化的操作 -->
if (isObject && typeof shouldScroll.selector === 'string') {
const el = document.querySelector(shouldScroll.selector)
if (el) {
let offset = shouldScroll.offset && typeof shouldScroll.offset === 'object' ? shouldScroll.offset : {}
offset = normalizeOffset(offset)
position = getElementPosition(el, offset)
} else if (isValidPosition(shouldScroll)) {
position = normalizePosition(shouldScroll)
}
} else if (isObject && isValidPosition(shouldScroll)) {
position = normalizePosition(shouldScroll)
}
使用window.scrollTo来进行滚动处理
if (position) {
window.scrollTo(position.x, position.y)
}
}
push
push操作也是 HTML5History模式下的一个比较关键的方法，他使用pushState来进行跳转操作，然后handleScroll来进行滚动\
export function pushState (url?: string, replace?: boolean) {
<!-- 保存当前页面的滚动位置 -->
saveScrollPosition()
// try...catch the pushState call to get around Safari
// DOM Exception 18 where it limits to 100 pushState calls
const history = window.history
try {
<!-- 判断是哪种操作动作 -->
if (replace) {
history.replaceState({ key: _key }, '', url)
} else {
_key = genKey()
history.pushState({ key: _key }, '', url)
}
} catch (e) {
window.location[replace ? 'replace' : 'assign'](url)
}
}
HashHistory实现
对于HashHistory的实现，和HTML5History的区别是在于Listener的方式和跳转的方式
Listener的方式这里是使用了hashchange，但是如果需要滚动行为就会去监听popstate
window.addEventListener(supportsPushState ? 'popstate' : 'hashchange')
跳转的方式会判断是否需要滚动，不需要就直接使用window.location.hash
function pushHash (path) {
if (supportsPushState) {
pushState(getUrl(path))
} else {
window.location.hash = path
}
}
总结
以上所述是小编给大家介绍的vue-router之hash模式和history模式,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对码农之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
以上就是本次给大家分享的关于java的全部知识点内容总结，大家还可以在下方相关文章里找到相关文章进一步学习，感谢大家的阅读和支持。
您可能感兴趣的文章:
vue-router 相关电子书
学习笔记
使用vue-router与v-if实现tab切换遇到的问题及解决方法
vue-router 该如何使用 忽然碰到一个常见的问题，明明可以使用 v-if / v-show 可以的解决的问题，有没有必要是使用 vue-router来解决。 比如常见的 tab 切换。一时间，我有些犹豫了，有没有必要滥用 vue-router。那到底何时用才叫合理呢？ 先上代码，用两种方式实现的效果 使用vue-router router import Tab1 from './components/tab/TabOne'import Tab2 from './components/tab/TabTwo'import Tab3 from './components/tab/TabThree'import Tab4 from './components/tab/TabFour'const routes = [ {path: '/tab1', component: Tab1}, {path: '/tab2', component: Tab2}, {path: '/tab3', component: Tab3}, {path: '/tab4', component: Tab4},]const router = new VueRouter({ routes}) .vue 文件中 div class="tab" router-link to="/tab1"tab1/router-link router-link to="/tab2"tab2/router-link router-link to="/tab3"tab3/router-link router-link to="/tab4"tab4/router-link router-view/router-view/div 使用 v-if/v-show .vue div class="tab" button……
vue-router+nginx 非根路径配置方法
vue-router 的默认数据hash模式-使用url的hash来模拟一个完整的URL，于是当URL改变时，页面不会重新加载。 一般情况下，我们不喜欢丑丑的hash，类似于index.html#/matchResult，可以使用路由的history模式。history模式是利用history.pushState API来实现页面跳转。 但是有个问题，在使用nginx的时候，我们需要添加一些配置。 直接配置在根路径下 直接配置在根路径下，访问的时候只用输入http://yoursite.com，在nginx的配置如下 location / { try_files $uri $uri/ /index.html;} 非根路径配置 如果一个域名下有多个项目，那么使用根路径配置就不合适了，我们需要在根路径下指定一层路径，比如说 A项目 http://yoursite.com/A B项目 http://yoursite.com/B nginx的配置 location ^~/A { alias /XX/A;//此处为A的路径 index index.html; try_files $uri $uri/ /A/index.html; } location ^~/B { alias /XX/B;//此处为B的路径 index index.html; try_fi……
vue-router 中router-view不能渲染的解决方法
最近在做一个vue的项目，其中使用了vue2.0,vue-router2.0。在使用vue-router的时候跳了一个很大的坑，router-view不能渲染，花费了好多时间终于发现了原因。 项目目录结构 其中main.js import Vue from 'vue';import App from './App';import router from './router';/* eslint-disable no-new */new Vue({ el: '#app', router, render: h = h(App)}); app.vue template div id="app" div class="tab" div class="tab-item" router-link to="/goods"商品/router-link /div div class="tab-item" router-link to="/ratings"评论/router-link /div div class="tab-item" router-link to="/seller"商家/router-link /div /div div router-view/router-view /div /div/templatescript export default { name: 'app', components: { } };/scriptstyle lang="stylus" rel="stylesheet/stylus" .tab display: flex width: 100% height: 40px line-height: 40px .tab-item flex: 1 text-align: center gt; a display: block/style router/index.js import Vue from 'vue';import VueRouter from 'vue-router';impor……