vue-router的hash模式和history模式详解
发布日期:2021-08-22 02:44:36 浏览次数:1 分类:技术文章

本文共 4126 字,大约阅读时间需要 13 分钟。

参考来源:
一、vue-router是什么

​ vue-router就是WebApp的链接路径管理系统。vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来。传统的页面应用,是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中,则是路径之间的切换,也就是组件的切换。路由模块的本质 就是建立起url和页面之间的映射关系

问题:为什么不用a标签

二、vue-router实现原理
1.vue-router 默认 hash 模式

​ 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载。 hash(#)是URL 的锚点,代表的是网页中的一个位置,单单改变#后的部分,浏览器只会滚动到相应位置,不会重新加载网页,也就是说hash 出现在 URL 中,但不会被包含在 http 请求中,对后端完全没有影响,因此改变 hash 不会重新加载页面;同时每一次改变#后的部分,都会在浏览器的访问历史中增加一个记录,使用”后退”按钮,就可以回到上一个位置;所以说Hash模式通过锚点值的改变,根据不同的值,渲染指定DOM位置的不同数据。

问题:是怎么监听hash变化的——hashchange()

如何简单实现:

  1. Class关键字初始化一个路由.
class Routers {  constructor() {    // 以键值对的形式储存路由    this.routes = {};    // 当前路由的URL    this.currentUrl = '';  }}复制代码
  1. 实现路由hash储存与执行。在初始化完毕后我们需要思考两个问题:

    • 将路由的hash以及对应的callback函数储存
    • 触发路由hash变化后,执行对应的callback函数
    class Routers {  constructor() {    this.routes = {};    this.currentUrl = '';  }  // 将path路径与对应的callback函数储存  route(path, callback) {    this.routes[path] = callback || function() {};  }  // 刷新  refresh() {    // 获取当前URL中的hash路径    this.currentUrl = location.hash.slice(1) || '/';    // 执行当前hash路径的callback函数    this.routes[this.currentUrl]();  }}复制代码
  2. 监听对应事件,我们只需要在实例化Class的时候监听上面的事件即可.

class Routers {  constructor() {    this.routes = {};    this.currentUrl = '';    this.refresh = this.refresh.bind(this);    window.addEventListener('load', this.refresh, false);    window.addEventListener('hashchange', this.refresh, false);  }  route(path, callback) {    this.routes[path] = callback || function() {};  }  refresh() {    this.currentUrl = location.hash.slice(1) || '/';    this.routes[this.currentUrl]();  }}复制代码

完整示例:

  1. 此外还要实现回退功能等,
2.vue-router 可选择 history模式

​ 由于hash模式会在url中自带#,如果不想要很丑的 hash,我们可以用路由的 history 模式,只需要在配置路由规则时,加入"mode: 'history'".

//main.js文件中const router = new VueRouter({  mode: 'history',  routes: [...]})复制代码

​ 这种模式充分利用了html5 history interface 中新增的 pushState() 和 replaceState() 方法。这两个方法应用于浏览器记录栈,在当前已有的 back、forward、go 基础之上,它们提供了对历史记录修改的功能。只是当它们执行修改时,虽然改变了当前的 URL ,但浏览器不会立即向后端发送请求。不过这种模式要玩好,还需要后台配置支持。因为我们的应用是个单页客户端应用,如果后台没有正确的配置,当用户在浏览器直接访问 就会返回 404,这就不好看了。所以呢,你要在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html 页面,这个页面就是你 app 依赖的页面。

export const routes = [   {
path: "/", name: "homeLink", component:Home} {
path: "/register", name: "registerLink", component: Register}, {
path: "/login", name: "loginLink", component: Login}, {
path: "*", redirect: "/"}]复制代码
2.1.history API介绍:

其中常用的只有几种:

window.history.back();       // 后退window.history.forward();    // 前进window.history.go(-3);       // 后退三个页面复制代码

history.pushState用于在浏览历史中添加历史记录,但是并不触发跳转,此方法接受三个参数,依次为:

state:一个与指定网址相关的状态对象,popstate事件触发时,该对象会传入回调函数。如果不需要这个对象,此处可以填null。title:新页面的标题,但是所有浏览器目前都忽略这个值,因此这里可以填null。url:新的网址,必须与当前页面处在同一个域。浏览器的地址栏将显示这个网址。复制代码

history.replaceState方法的参数与pushState方法一模一样,区别是它修改浏览历史中当前纪录,而非添加记录,同样不触发跳转。

popstate事件,每当同一个文档的浏览历史(即history对象)出现变化时,就会触发popstate事件。

2.2.新标准下路由的实现:
class Routers {  constructor() {    this.routes = {};    this._bindPopState();  }  init(path) {    history.replaceState({
path: path}, null, path); this.routes[path] && this.routes[path](); } route(path, callback) { this.routes[path] = callback || function() {}; } go(path) { history.pushState({
path: path}, null, path); this.routes[path] && this.routes[path](); } _bindPopState() { window.addEventListener('popstate', e => { const path = e.state && e.state.path; this.routes[path] && this.routes[path](); }); }}window.Router = new Routers();Router.init(location.pathname);const content = document.querySelector('body');const ul = document.querySelector('ul');function changeBgColor(color) { content.style.backgroundColor = color;}Router.route('/', function() { changeBgColor('yellow');});Router.route('/blue', function() { changeBgColor('blue');});Router.route('/green', function() { changeBgColor('green');});ul.addEventListener('click', e => { if (e.target.tagName === 'A') { e.preventDefault(); Router.go(e.target.getAttribute('href')); }});复制代码
3.使用路由模块来实现页面跳转的方式
  • 方式1:直接修改地址栏
  • 方式2:this.$router.push(‘路由地址’)
  • 方式3:<router-link to="路由地址"></router-link>

转载于:https://juejin.im/post/5caf0cddf265da03474def8a

转载地址:https://blog.csdn.net/weixin_33734785/article/details/91421635 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:LeetCode简单算法题目-JS解法
下一篇:喜迎儿童节,肥宅快乐码。

发表评论

最新留言

不错!
[***.144.177.141]2024年03月05日 18时15分36秒

关于作者

    喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!

推荐文章

catch that cow java_POJ3278——Catch That Cow 2019-04-21
java integer 不变模式_Java代码的变与不变 2019-04-21
java guava 使用_Java8-Guava实战示例 2019-04-21
python barrier option pricing_《Python金融数据分析》书内代码实战与讲解(二)金融衍生物定价... 2019-04-21
java自带工具_深入了解Java JDK自带工具,包括javac、jar、jstack等,实用~ 2019-04-21
gnome mysql client_解决MySQLWorkbenchgnome-keyring-daemon错误的方法分享 2019-04-21
java线程占用CPU_在windows下揪出java程序占用cpu很高的线程并完美解决 2019-04-21
java多态替换switch_使多态性无法解决那些switch / case语句的麻烦 2019-04-21
java httpclient 进度条_如何使用Apache HttpClient 4获取文件上传的进度条? 2019-04-21
下列不属于java语言特点的是_下列选项中,不属于Java语言特点的一项是( )。... 2019-04-21
java中小数的乘法_javascript的小数点乘法除法实例 2019-04-21
kappa一致性检验教程_SPSS在线_SPSSAU_Kappa一致性检验 2019-04-21
linux shell mysql备份_linux shell 备份mysql 数据库 2019-04-21
Java双向链表时间复杂度_链表是什么?有多少种链表?时间复杂度是? 2019-04-21
unity3d能和java系统整合吗_Android与Unity3d的整合 2019-04-21
minecraft666java_我的世界的666的世界 2019-04-21
辽宁师范大学java_辽宁师范大学心理学院 2019-04-21
java程序有连接数据库_Java程序连接数据库 2019-04-21
java reduce.mdn_reduce高级用法 2019-04-21
java shape用法_Java PShape.scale方法代码示例 2019-04-21