vue-router中hash模式、history模式原理

利用a连接的跳转及监听window的hashchange事件拿到跳转的hash，借助于vue的component组件，实现组件跳转。

<div id="app"><!-- 入口 --><a href="#/zhuye">主页</a><a href="#/caijing">财经</a><a href="#/tiyu">体育</a><a href="#/shenghuo">生活</a><!-- ! Vue 内置组件 组件占位符 寻找对应的组件名 出口 --><component :is="comName"></component>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>const zhuye = {template: `<h1>主页信息</h1>`}const caijing = {template: `<h1>财经信息</h1>`}const tiyu = {template: `<h1>体育信息</h1>`}const shenghuo = {template: `<h1>生活信息</h1>`}const vm = new Vue({el: '#app',data: {comName: 'zhuye'},components: {zhuye,caijing,tiyu,shenghuo}})//  锚点 hashchange 事件window.onhashchange = function () {//   将锚点信息给vue实例绑定的数据vm.comName = location.hash.slice(2)}
</script>

利用history对象，重新封装pushState与replaceState方法，实现对地址变化的监听。对于history的其他方法可以通过原生popstate监听。

/*** 重写history的pushState和replaceState* @param action pushState|replaceState* @return {function(): *}*/
function wrapState(action) {// 获取原始定义let raw = history[action]return function () {// 经过包装的pushState或replaceStatelet wrapper = raw.apply(this, arguments)// 定义名为action的事件let e = new Event(action)// 将调用pushState或replaceState时的参数作为stateInfo属性放到事件参数event上e.stateInfo = { ...arguments }// 调用pushState或replaceState时触发该事件window.dispatchEvent(e)return wrapper}
}//修改原始定义
history.pushState = wrapState('pushState')
history.replaceState = wrapState('replaceState')// 监听自定义的事件
window.addEventListener('pushState', function (e) {console.log('pushState', e.stateInfo)
})
window.addEventListener('replaceState', function (e) {console.log('replaceState', e.stateInfo)
})

vue-router中hash模式、history模式原理相关推荐

vue router中hash模式和history模式的区别
面试问答 hash 模式与 history 模式的区别,这个也是面试常问的问题,不要小看这道题其实问到这里的时候那个面试官应该是个大牛,开发经验丰富,这个题其实就是考验你的开发经验是否属实. ...
vue 刷新嵌套路由_vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法...
解决vue-router嵌套路由(子路由)在history模式下刷新无法渲染页面的问题,具体内容如下一. 异常描述本来使用的是vue-router的hash模式,但是hash模式下url需要带&q ...
vue router 的两种路由模式hash与history的区别
文章目录两种模式特点总结两种模式前端路由的核心,就在于 -- 改变视图的同时不会向后端发出请求. hash模式是通过改变锚点(#)来更新页面URL,并不会触发页面重新加载,我们可以通过win ...
Hash 和 History模式的区别
表现形式的区别 Hash 模式 https://music.163.com/#/playlist?id=3102961864(有# 号,# 号后面带路由地址,?号携带 url 参数,官方文档说这种模式 ...
Vue项目打包部署（history模式）
前提准备我们需要准备一个vue项目(vue-cli3或vue-cli4).一个nginx服务器本教程讲解的是vue-router中history模式的部署,完全适用于vue-cli3,4.vue- ...
hash和history的原理和区别
原理区别 hash原理:hash通过监听浏览器的onhashchange()事件变化,查找对应的路由规则 history原理: 利用H5的 history中新增的两个API pushState() 和 ...
Vue代码中如何开启调试模式
当我们开发vue项目时候,会遇到在谷歌浏览器上通过F12调试代码的问题,但是代码在显示的时候看到的不是真实的编码,看着像一堆压缩过的代码,这时候就需要打开调试模式.方式如下(对于版本不是很确定): 1 ...
Vue Router history模式的配置方法及其原理
转载地址:https://segmentfault.com/a/1190000019391139 vue-router分为hash和history模式,前者为其默认模式,url的表现形式为http:/ ...
【前端路由】Vue-router 中hash模式和history模式的区别 a标签跳转
[前端路由]Vue-router 中hash模式和history模式的区别咱们今天说说VUE路由的hash模式与history模式的区别,这个也是面试常问的问题,不要小看这道题其实问到这里的时候那个 ...
history模式监听_面试题：VueRouter中的 hash 模式和 history 模式有什么区别
面试题:VueRouter中的 hash 模式和 history 模式有什么区别 hash模式 hash 模式的路由中带有 # 号 hash 模式通过 window.onhashchange 方法监听 ...

vue-router中hash模式、history模式原理

vue-router中hash模式、history模式原理相关推荐

最新文章

热门文章