首页 > 其他分享 >手撕Vue-Router-初始化路由信息

手撕Vue-Router-初始化路由信息

时间:2023-11-21 23:45:05浏览次数:33  
标签:Vue hash NueRouter location Router 我们 路由 routerInfo

前言

经过上一节课的学习,我们已经完成了提取我们想要的路由信息数据格式,提取完毕了之后,接下来我们该干什么,接下来需要做的步骤就是监听路由的变化,保存当前的路由。

那么就会遇到几个问题,就是怎么监听,怎么保存,我们先回到 VueRouter 的官方文档,点击右上角的 API 参考,然后拖动到底部,在底部找到组件注入,当中的注入的属性:

其实我们在使用 VueRouter 的时候,只要你注册了 VueRouter 之后,他会在每一个 Vue 实例中都添加两个属性,一个是 $router,一个是 $route,这两个属性是什么呢?

$router

其实对应着就是我们自定义的 NueRouter 对象。

$route

$route 其实对应着就是一个普通的对象,这个对象就保存了当前的路由地址,等等等等一系列信息,所以为了将来能够注入这两个对象,我这里单独写一个类来存储这两个对象相关的信息。

代码实现

class NueRouterInfo {
    constructor() {
        this.currentPath = null;
    }
}

通过这个类,我们就可以保存当前的路由地址,默认等于 null,将来路由地址发生变化的时候,我们就可以修改这个值。

定义好了这个类我们是需要使用这个类,所以我们在哪里进行使用呢,我们在 NueRouter 类中进行使用,我们在 NueRouter 类中定义一个属性,这个属性就是 NueRouterInfo 的实例,然后在 NueRouter 的构造函数中进行初始化路由信息。

首先定义 NueRouterInfo 的实例:

this.routerInfo = new NueRouterInfo();

然后在 NueRouter 的构造函数中进行初始化路由信息,我这里定义一个 initDefault 方法,然后在这个方法中进行初始化路由信息,这个方法是在 NueRouter 的构造函数中进行调用的。

在 initDefault 方法中,首先根据当前的 mode 也就是路由模式来进行走不同分支的逻辑代码,如果是 hash 模式,那么我们就需要监听 hashchange 事件,如果是 history 模式,那么我们就需要监听 popstate 事件。

这是其中的一步,我们的第一步其实并不是监听,首先要处理的就是,打开的界面先判断 mode 模式如果是 hash,看看界面有没有 hash,如果没有就跳转到 #/,如果有就不用管了,如果是 history 模式,那么就看看界面有没有 history,如果没有就跳转到 /,如果有就不用管了。

第二步才是监听,监听的时候,我们需要将当前的路由地址保存到 NueRouterInfo 的实例中,好了,我们来看看代码怎么写。

initDefault() {
    if (this.mode === 'hash') {
        // 1.判断打开的界面有没有hash, 如果没有就跳转到#/
        if (!location.hash) {
            location.hash = '/';
        }
        // 2.加载完成之后和hash发生变化之后都需要保存当前的地址
        window.addEventListener('load', () => {
            this.routerInfo.currentPath = location.hash.slice(1);
        });
        window.addEventListener('hashchange', () => {
            this.routerInfo.currentPath = location.hash.slice(1);
            console.log(this.routerInfo);
        });
    } else {
        // 1.判断打开的界面有没有路径, 如果没有就跳转到/
        if (!location.pathname) {
            location.pathname = '/';
        }
        // 2.加载完成之后和history发生变化之后都需要保存当前的地址
        window.addEventListener('load', () => {
            this.routerInfo.currentPath = location.pathname;
        });
        window.addEventListener('popstate', () => {
            this.routerInfo.currentPath = location.pathname;
            console.log(this.routerInfo);
        });
    }
}

测试

代码写完了,我们来测试一下,先在 app.vue 中定义两个 a 标签 href 是 hash 模式代码如下:

<template>
  <div id="app">
    <a href="#/home">首页</a>
    <a href="#/about">关于</a>
  </div>
</template>
<style>
</style>

然后在更改一下 NueRouter 的传参,将 mode 改成 hash 模式, 我们来测试第一步我们处理的逻辑,打开界面,看看有没有 hash,如果没有就跳转到 #/,如果有就不用管了。

首先访问:http://localhost:8080/ ,然后我们看看界面的地址栏,发现没有 hash,默认就会跳转到 #/:

然后我们再访问:http://localhost:8080/#/home ,然后我们看看界面的地址栏,发现有 hash,就不用管了:

接下来我们测试第二步,监听 hashchange 事件,我们在 hashchange 事件中打印了 NueRouterInfo 的实例,看看有没有保存当前的路由地址,我们分别点击首页和关于,打印结果如下:

好了,hash 模式的测试就完成了,关于 history 模式需要编写的代码比较多,我这里就不带着大家一起来验证了,因为他们两个都是同一个世界同一个梦想的。

到此为止,我们就完成了初始化路由信息的代码编写,接下来我们下一篇的内容就是根据当前的路由地址,找到对应的组件,然后渲染到页面上。

最后

标签:Vue,hash,NueRouter,location,Router,我们,路由,routerInfo
From: https://www.cnblogs.com/BNTang/p/17847923.html

相关文章

  • SpringBoot + Vue实现分页查询
    后端在controller层修改SpringBoot自带分页查询方法,只需要修改关键代码就可以@GetMapping("/findAll/{page}/{size}")//获取url输入的页码publicPage<Users>findAll(@PathVariable("page")intpage,@PathVariable("size")intsize){//将页码取到方法内P......
  • vue3所遇问题
    1. table表格无边框数据乱飞 解决方法:将import{}from'Elementplus'  删去  2.表单无法输入内容 解决方法 :   ref="form"     :model="form333"   ref与:modle 不可重名......
  • 计算机网络之策略路由与双机热备
    一.策略路由随着网络工程的不断发展,基本的路由选择已经满足不了网络工程师的网络搭建了,基本路由选择就是查路由表来选择下一跳的路由但是,这种路由选择无法实现负载均衡,也就是当路由中有两条相同的路径时,只会有一条路径被选择,另外一条路由很少被选择所以就衍生出来了策略路由,它......
  • Vue中的Vuex
    概述Vuex是一个专为Vue.js应用程序开发的状态管理模式+库。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。对于组件间的通信方式而言,vuex也是一个可以进行任意组件通信的方法。使用场景:某个状态在很多组件来使用(个人信息......
  • vue 检测可视区域大小及是否改变
    表格height:'auto',如果是只有一个vxe-grid还好,会自动伸展高度,但是多个展示的时候,比如左侧列表,右侧显示一个流程。这样height:'auto',发现不太好使。这样就要计算可视区域高度,并进行动态处理。  constareaHeight=ref(0); onMounted(()=>{areaHeight.value=d......
  • 基于vue技术的农业设备租赁系统-计算机毕业设计源码+LW文档
    摘 要使用旧方法对农业设备租赁系统的信息进行系统化管理已经不再让人们信赖了,把现在的网络信息技术运用在农业设备租赁系统的管理上面可以解决许多信息管理上面的难题,比如处理数据时间很长,数据存在错误不能及时纠正等问题。这次开发的农业设备租赁系统对收货地址管理、字典管理......
  • 前端vue经典面试题78道(重点详细简洁)
    前端vue经典面试题78道(重点详细简洁)目录1.自我介绍2.vue面试题1.v-show和v-if区别的区别:2.为何v-for要用key3.描述vue组件声明周期mm单组件声明周期图​父子组件生命周期图4.vue组件如何通信5.描述组件渲染和更新的过程1、vue组件初次渲染过程2、vue组件更新过程6......
  • 记录--用了那么久的Vue,你了解Vue的报错机制吗?
    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 Vue的5种处理Vue异常的方法相信大家对Vue都不陌生。在使用Vue的时候也会遇到报错,也会使用浏览器的F12来查看报错信息。但是你知道Vue是如何进行异常抛出的吗?vue是如何处理异常的呢?接下来和大家介绍介绍,Vue......
  • 单页面下模拟路由跳转
    项目需求:一个路由页面下展示多个页面,且切换时要像真正的路由一样可以携带路由参数三个前置知识:vue不允许在路由栈中推入同一URL地址,否则会告警:NavigationDuplicated:Avoidedredundantnavigationtocurrentlocation:"/route".在以react、vue为代表的SPA项目中,在万物......
  • 笔记:华为路由器的使用方法与CTL终端基本操作
    使用华为路由器的方法与基本操作:在本文中可能出现下列命令行格式,它们所代表的含义如下。格式意义粗体命令行关键字(命令中保持不变、必须照输的部分)采用加粗字体表示。斜体命令行参数(命令中必须由实际值进行替代的部分)采用斜体表示。[]表示用“[......