【VueRouter 源码学习】第一篇 - 环境搭建与路由模式介绍

BraveWang
412 阅读5分钟

这是我参与8月更文挑战的第17天，活动详情查看：8月更文挑战

一，前言

本篇开始，进入 VueRouter 源码的学习，本篇主要涉及一下内容：

  • VueRouter 源码项目环境搭建
  • 两种路由模式的简单介绍

二，项目环境搭建

VueRouter 源码项目，将使用 vue-cli 官方提供的快速原型开发工具进行搭建；

2.1，安装依赖

安装 vue-cli：

npm install @vue/cli -g

安装 vue-cli 快速原型开发工具：

npm install -g @vue/cli-service-global

快速原型开发工具：能够快速地帮助开发者搭建并运行一个 vue 项目；

2.2，创建入口文件

安装完成后，可以直接在项目文件夹中创建入口文件 main.js：

// 可直接进行依赖导入，当项目启动时，会自动查找相关依赖
import Vue from 'vue';	

// 创建 Vue 实例
// 若没有提供相关文件，将会采用 vue-cli 中自带的作为默认文件：如 el:'#app'
const vm = new Vue({
  el:'#app',
  render:(h)=>{  // h 相当于 _c 即 createElement
    return h('h1', {}, 'Hello Vue Router');
  }
});

2.3，项目配置

添加 vue.config.js 配置，用于关闭默认的 overlay 报错信息显示：

module.exports = {
  devServer: {
    overlay: {
      warnings: false,
      errors: false
    }
  }
}

2.4，启动服务

开发服务启动命令：

vue serve main.js

备注：项目配置将默认使用 vue-cli 项目中的配置；

文件的查找规则：

  • 直接执行 vue serve 默认会去找入口文件 main.js；
  • 如果 main.js 不存在，会继续去找 App.vue；
  • 如果还是找不到，就会抛出错误；

可直接执行 vue serve 启动服务，查看页面输出，overlay 报错消失：

image.png

三，路由模式简介

  • 之前，在前后端不分离的架构模式下，页面跳转的控制完全由后端进行处理，每次跳转都需要访问服务器并刷新整个页面；
  • 现在，在前后端分离的架构模式下，前端通过一套路由系统将页面间的跳转关系维护在本地，每次跳转仅通过API接口获取数据并渲染到页面上即可；

在 VueRouter 中，共包含 Hash、History 两种路由模式；

3.1，Hash 模式（默认）

Hash 模式（默认）：使用 URL 的 hash 来模拟一个完整的 URL；

兼容性：支持所有浏览器；

特点：Hash 模式的 URL 中会带有类似锚点的 # 号；

Hash 模式的原理

Hash 模式主要依靠浏览器提供的 onhashchange 事件：

// onhashchange 事件触发条件：当一个窗口的 URL 中 # 后面的部分改变时
window.onhashchange = function(event){
  // http://localhost:8080/aaa/#/bbb -> http://localhost:8080/aaa/#/ccc
  console.log(event.oldURL, event.newURL);
  let hash = location.hasg  //通过 location 对象获取 hash 地址
  console.log(hash)         // #/ccc
}

参考 MDN： onhashchange

Hash 模式的优点

  • 当 URL 改变时，页面不会重新加载；
  • Hash 变化的 URL 会被浏览器所记录，可以通过浏览器的“前进、后退”进行页面的切换和刷新；

Hash 模式的缺点

  • URL 地址中会包含'#'(还有可能是'#/')，页面的路径会被设置到'#'之后，不美观；
  • onhashchange 中，仅能够改变 '#' 之后的 url 片段；

在一般情况下，线上生产项目不会采用 hash 路由模式；

3.2，History 模式

History 模式：需要服务器后台的配置和支持；

兼容性：由于依赖 HTML5 History API，只能兼容到 IE10；

例：http://localhost:8080/aaa/bbb

与 Hash 模式相比，History 模式的 URL 中不带有 # 号,是一个‘正常’的 URL；

History 模式的原理

VueRouter 的 History 模式，主要使用由浏览器提供的 History API 进行实现；

所以，VueRouter 源码对 History 模式的处理要比 Hash 模式稍简单一些；

参考 MDN：History API

History 模式的优点

  • 相比 Hash 模式，History 模式的 URL 显示是正常且美观的；
  • hashchange 仅能够改变 '#' 之后的 url 片段，而 history api 提供了完全的自由；
  • 具有浏览器历史记录，可以进行“前进”和“后退”的页面切换；
  • 当路径变化时，可以通过监听浏览器的路径变化；

History 模式的缺点

  • History 模式可以进行“前进、后退”操作，但页面 F5 刷新时，就会报出页面404；

这时因为 F5 的页面刷新操作，是会真正到服务器请求页面的；

在 hash 模式下，前端路由修改的 # 部分，浏览器请求时不会携带，所以不会有问题；

但 history 模式下，服务器上没有相关的响应或资源时，会报错 404；

单页面应用打包后404问题

问题描述

单页面应用，本地开发一切正常，打包后访问报 404；

解决方案

在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。

注意事项

采用这种解决方案后，服务器就不再返回 404 错误页面了；

为了避免这种情况，需要在 Vue 应用中覆盖所有的路由情况，然后再给出一个 404 页面。

history 模式：一般用于生产环境，但需要服务端支持，否则刷新页面会报 404；

补充：Abstract模式

Abstract模式：支持所有js运行模式。若没有检测到浏览器API，将强制使用此模式；

四，结尾

本篇，环境搭建与路由模式介绍，主要涉及以下几个点：

  • 完成了 VueRouter 源码项目开发环境的搭建；
  • 介绍了 Hash 和 History 两种路由模式;

下一篇，介绍两种路由的使用方式；

维护日志

  • 20210818：
    • 调整“项目环境搭建”部分描述，并添加二级目录；
    • 重写“路由模式简介”部分，添加了二级、三级标题；
    • 调整“结尾”部分
avatar
文章
阅读
粉丝