vue3中的vue-router简单实现以及router变迁带来的思考

Posted 2022-02-03 恪愚

jQuery 以及之前的时候，前端工程师并不需要了解路由的概念。对于每次的页面跳转，都由后端开发人员来负责重新渲染模板。前端依赖后端，并且前端不需要负责路由的这种开发方式，这样开发速度会很快、后端也可以承担部分前端任务等。当然，这种开发方式也有很多缺点，比如前后端项目无法分离、页面跳转由于需要重新刷新整个页面、等待时间较长等等，所以也会让交互体验下降。
为了提高页面的交互体验，很多前端工程师做了不同的尝试。在这个过程中，前端的开发模式发生了变化，项目的结构也发生了变化：由原先的
访问路由 -> 后端匹配路由 -> 匹配前端模板 -> 加载JS、CSS
变成了
访问路由 -> 前端入口 ->加载JS、CSS -> JS根据路由匹配渲染的组件 -> 渲染路由组件

可以看到：用户访问路由后，无论是什么 URL 地址，都直接渲染一个前端的入口文件 index.html，然后就会在index.html 文件中加载 JS 和 CSS。之后，javascript 获取当前的页面地址，以及当前路由匹配的组件，再去动态渲染当前页面即可。用户在页面上进行点击操作时，也不需要刷新页面，而是直接通过 JS 重新计算出匹配的路由渲染即可。前端获得了路由的控制权，在 JavaScript 中控制路由系统。也因此，页面跳转的时候就不需要刷新页面，网页的浏览体验也得到了提高。这种所有路由都渲染一个前端入口文件的方式，是单页面应用程序（SPA，single page application）应用的雏形。

通过 JavaScript 动态控制数据去提高用户体验的方式并不新奇，在html5时代浏览器路由的变化可以通过 pushState 来操作。之后，这种开发模式在 MVVM 框架的时代大放异彩，现在大部分使用 Vue/React/Angular 的应用都是这种架构。SPA 应用相比于模板的开发方式，对前端更加友好

前端路由实现原理

通过 URL 区分路由的机制，有两种实现方式，
一种是 hash 模式，通过 URL 中 # 后面的内容做区分，我们称之为 hash-router；
另外一个方式就是 history 模式，在这种方式下，路由看起来和正常的 URL 完全一致。

这两个不同的原理，在 vue-router 中对应两个函数，分别是 createWebHashHistory 和 createWebHistory。

在vue3之前更为简单，是通过mode值 history和hash来区分的。

hash 模式

单页应用在页面交互、页面跳转上都是无刷新的，这极大地提高了用户访问网页的体验。为了实现单页应用，前端路由的需求也变得重要了起来。类似于服务端路由，前端路由实现起来其实也很简单，就是匹配不同的 URL 路径，进行解析，然后动态地渲染出区域 HTML 内容。但是整体 URL 每次变化都会造成页面的刷新。解决这一问题的思路便是在改变 URL 的情况下，保证页面的不刷新 —— 也就是只改变#后面的东西。在进行页面跳转的操作时，hash 值的变化并不会导致浏览器页面的刷新，只是会触发 hashchange 事件。在下面的代码中，通过对 hashchange 事件的监听，我们就可以在 fn 函数内部进行动态地页面切换

window.addEventListener('hashchange',fn)

这种方式在现在的微前端webview中使用尤为广泛

history 模式

2014 年之后，因为 HTML5 标准发布，浏览器多了两个 API：pushState 和 replaceState。通过这两个 API ，我们可以改变 URL 地址，并且浏览器不会向后端发送请求，同时还会触发 popstate 事件（会增加location下history的长度）。通过这两个 API 和 popstate 事件，我们就能用另外一种方式实现前端路由。在下面的代码中，我们监听了 popstate 事件，可以监听到通过 pushState 修改路由的变化。并且在 fn 函数中，我们实现了页面的更新操作

window.addEventListener('popstate', fn)

实现一个极其简单的hash版vue-router

我们首先要实现 Router 类去管理路由，并且，我们使用 createWebHashHistory 来返回 hash 模式相关的监听代码，以及返回当前 URL 和监听 hashchange 事件的方法；然后，我们通过 Router 类的 install 方法注册了 Router 的实例，并对外暴露 createRouter 方法去创建 Router 实例；最后还要暴露 useRouter 方法，去获取路由实例。

import ref,inject from 'vue'
import RouterLink from './RouterLink.vue'
import RouterView from './RouterView.vue'

const ROUTER_KEY = '__router__'

function createRouter(options)
    return new Router(options)


function useRouter()
    return inject(ROUTER_KEY) // 接收到当前的实例，这对使用的时候有大用

function createWebHashHistory()
    function bindEvents(fn)
        window.addEventListener('hashchange',fn)
    
    return 
        bindEvents,
        url:window.location.hash.slice(1) || '/'
    

class Router
    constructor(options)
        this.history = options.history
        this.routes = options.routes
        this.current = ref(this.history.url)

        this.history.bindEvents(()=>
            this.current.value = window.location.hash.slice(1)
        )
    
    install(app)
        app.provide(ROUTER_KEY,this) // 传递实例到router中
        app.component("router-link",RouterLink)
        app.component("router-view",RouterView)
    


export createRouter,createWebHashHistory,useRouter

有了上面这段代码，我们回到 src/router/index.js 中，可以看到下面代码的使用方式，我们使用 createWebHashHistory 作为 history 参数，使用 routes 作为页面的参数传递给 createRouter 函数

import 
    createRouter,
    createWebHashHistory,
 from '手写的router存放的文件'
const router = createRouter(
  history: createWebHashHistory(),
  routes
)

上面router实现中我们还看到了两个最重要的内置组件挂载 —— router-view 和 router-link。
在 createRouter 函数 创建的 Router 实例上，current 返回当前的路由地址，并且使用 ref 包裹成响应式的数据。
router-view 组件的功能，就是 current 发生变化的时候，去匹配 current 地址对应的组件，然后动态渲染到 router-view 就可以了。
我们在router相同目录下新建 RouterView.vue，写出下面的代码。在代码中，我们首先使用 useRouter 获取当前路由的实例；然后通过当前的路由，也就是 router.current.value 的值，在用户路由配置 route 中计算出匹配的组件；最后通过计算属性返回 comp 变量，在 template 内部使用 component 组件动态渲染。

<template>
    <component :is="comp"></component>
</template>
<script setup>

import computed  from 'vue'
import  useRouter  from '手写router的文件'

let router = useRouter()

const comp = computed(()=>
    const route = router.routes.find(
        (route) => route.path === router.current.value
    )
    return route?route.component : null
)
</script>

有了 RouterView 组件后，我们再来实现 router-link 组件。我们在 router相同文件夹 下面新建文件 RouterILink.vue，并写入下面的代码。代码中的 template 依然是渲染一个 a 标签，只是把 a 标签的 href 属性前面加了个一个 #， 就实现了 hash 的修改。

<template>
    <a :href="'#'+props.to">
        <slot />
    </a>
</template>

<script setup>
import defineProps from 'vue'
let props = defineProps( // 获取调用组件时传的值
    to:type:String,required:true
)

</script>

这样，一个 hash 模式的迷你 vue-router 就算实现了。

“回顾”

什么？install方法在哪里使用？
你知道在app.vue同级的index.js中，为什么要写

app.use(xxx)

么？这里面又有什么故事？

简单的说，use 方法 执行的就是第三方库/插件中的 install 方法！