【Vue3 生态】Vue Router 路由知识概览

前言

在 Web 前端开发中，路由是非常重要的一环，但是路由到底是什么呢？

数字化管理平台
Vue3+Vite+VueRouter+Pinia+Axios+ElementPlus
个人博客地址

• 从路由的用途上讲

  路由是指随着浏览器地址栏的变化，展示给用户不同的页面。

• 从路由的实现原理上讲

  路由是URL到函数的映射。它将 URL 和应用程序的不同部分映射到特定的处理程序或控制器上。

路由本身也经历了不同的发展阶段：

1. 服务端路由

   服务端路由也称后端路由。

   服务器根据用户访问的 URL 路径返回不同的响应结果。当我们在一个传统的服务端渲染的 web 应用中点击一个链接时，浏览器会从服务端获得全新的 HTML，然后重新加载整个页面。

   对于最简单的静态资源服务器，可以认为所有URL的映射函数就是一个文件读取操作。对于动态资源，映射函数可能是一个数据库读取操作，也可能是进行一些数据处理等等。

   • 好处

     安全性好、利于 SEO（Search Engine Optimization，搜索引擎优化。是指为了增加网页在搜索引擎自然搜索结果中的收录数量以及提升排序位置而做的优化行为）

   • 缺点

     加大服务器的压力，不利于用户体验，代码冗余

   正式服务端路由得缺点，让客户端路由开始展露头角。

2. 客户端路由

   客户端路由也称前端路由。

   当用户通过客户端访问不同的路径时，路由的映射函数利用诸如 History API 或是 hashchange 事件这样的浏览器 API 来管理应用当前应该渲染的视图，其根本就是操作 DOM 的显示和隐藏。

   • 基于 hash 的实现

     早期的前端路由的实现就是基于location.hash来实现的。实现原理也很简单就是：监听#后面的内容来发起Ajax请求来进行局部更新，而不需要刷新整个页面。

     location.hash的值就是URL中#后面的内容。

     例如:https://www.happy.com#me中的 location.hash = ‘#me’

     hash也存在下面几个特性：

     1.URL中的hash值只是客户端的一种状态，也就是说当向服务器发出请求时，hash部分不会被发送。

     2.hash值的改变，都会在浏览器的访问历史中增加一个记录，因此我们能通过浏览器的回退，前进按钮控制hash 的切换。

     3.我们可以使用hashchange事件来监听URL的变化

     触发hash变化的方式也有两种：

     1.通过a标签，并设置href属性，当用户点击这个标签后，URL就会发生变化，也就会触发hashchange事件了
     
        例如：<a href="#hahha">hahha</a>
     
     2.直接使用js来对location.hash进行赋值，从而改变URL 触发hashchange事件
     
        例如： location.hash = '#hahha'
     
     3.浏览器前进后退改变 URL，触发hashchange事件
     

   • 基于 history API 的实现

     1. 切换历史状态

        包括 back() 、forword() 、go(n) 三个方法，分别对应浏览器的前进，后退，跳转操作

        history.go(-2) //后退两次 + 刷新
        history.go(2) //前进两次
        history.back() //后退 (不刷新)
        history.forword() //前进
        

        back() 方法可加载历史列表中的前一个 URL(如果存在)。调用该方法的效果等价于点击后退按钮或调用 history.go(-1)

        forward() 方法可加载历史列表中的下一个 URL。调用该方法的效果等价于点击前进按钮或调用 history.go(1)

     2. 修改历史状态

        包括 pushState() 、replaceState() 两个方法，都接收三个参数：stateObj 、title、url。它们可以在不刷新页面的情况下，操作浏览器的历史记录。

        • pushState() 新增一个历史记录
        • replaceState() 替换当前的历史记录
        • popstate() 事件。用于监听历史记录的变化

        参数：

        • 状态对象(st