写点什么

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

用户头像
Brave
关注
发布于: 41 分钟前
【VueRouter 源码学习】第一篇 - 环境搭建与路由模式介绍

一,前言


本篇开始,进入 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 报错消失:



三,路由模式简介


  • 之前,在前后端不分离的架构模式下,页面跳转的控制完全由后端进行处理,每次跳转都需要访问服务器并刷新整个页面;

  • 现在,在前后端分离的架构模式下,前端通过一套路由系统将页面间的跳转关系维护在本地,每次跳转仅通过 API 接口获取数据并渲染到页面上即可;


在 VueRouter 中,共包含 Hash、History 两种路由模式;

3.1,Hash 模式(默认)


Hash 模式(默认):使用 URL 的 hash 来模拟一个完整的 URL;


兼容性:支持所有浏览器;


  • http://localhost:8080/aaa/#/bbb

  • http://localhost:8080/aaa#bbb


特点: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 两种路由模式;


下一篇,介绍两种路由的使用方式;

用户头像

Brave

关注

还未添加个人签名 2018.12.13 加入

还未添加个人简介

评论

发布
暂无评论
【VueRouter 源码学习】第一篇 - 环境搭建与路由模式介绍