Vue Router的手写实现方法实现


Posted in Javascript onMarch 02, 2020

为什么需要前端路由

在前后端分离的现在,大部分应用的展示方式都变成了 SPA(单页面应用 Single Page Application)的模式。为什么会选择 SPA 呢?原因在于:

  • 用户的所有操作都在同一个页面下进行,不进行页面的跳转。用户体验好。
  • 对比多页面,单页面不需要多次向服务器请求加载页面(只请求一次.html文件),只需要向服务器请求数据(多亏了 ajax)。因此,浏览器不需要渲染整个页面。用户体验好。

归根结底,还是因为 SPA 能够提供更好的用户体验。

为了更好地实现 SPA,前端路由是必不可少的。假设一个场景:用户在 SPA 页面的某个状态下,点击了强制刷新按钮。如果没有前端路由记住当前状态,那么用户点击该按钮之后,就会返回到最开始的页面状态。这不是用户想要的。

当然,需要前端路由另一个点在于:我们可以更好地进行 SPA 页面的管理。通过将组件与路由发生配对关联,依据路由的层级关系,可为 SPA 内部的组件划分与管理提供一个依据参考。

Hash 路由模式 与 History 路由模式

这是两种常见的前端路由模式。

Hash 路由模式

Hash 模式使用了浏览器 URL 后缀中的#xxx部分来实现前端路由。默认情况下,URL后缀中的#xxx hash 部分是用来做网页的锚点功能的,现在前端路由看上了这个点,并对其加以利用。
比如这个 URL:http://www.abc.com/#/hello,hash 的值为 #/hello。

为什么会看上浏览器URL后缀中的 hash 部分呢?原因也简单:

  • 浏览器URL后缀中的 hash 改变了,不会触发请求,对服务器完全没有影响。它的改变不会重新加载浏览器页面。
  • 更关键的一点是,因为hash发生变化的url都会被浏览器记录下来,从而你会发现浏览器的前进后退都可以用了,页面的状态与浏览器的URL就发生了挂钩。

hash模式背后的原理是onhashchange事件,可以在window对象上监听这个事件。

History 路由模式

随着 HTML5 中 history api 的到来,前端路由开始进化了。hashchange 只能改变 # 后面的代码片段,history api (pushState、replaceState、go、back、forward) 则给了前端完全的自由。简单讲,它的功能更为强大了:分为两大部分,切换和修改。

路由切换

参考MDN,切换历史状态包括 back、forward、go 三个方法,对应浏览器的前进,后退,跳转操作。

history.go(-2);//后退两次
history.go(2);//前进两次
history.back(); //后退
hsitory.forward(); //前进

路由修改

修改历史状态包括了pushState,replaceState两个方法:

/**
 ** 参数含义
 ** state: 需要保存的数据,这个数据在触发popstate事件时,可以在event.state里获取
 ** title:标题,基本没用,一般传 null
 ** url:设定新的历史记录的 url
 */ 
window.history.pushState(state, title, url) 

//假设当前的url是:https://www.abc.com/a/
//例子1
history.pushState(null, null, './cc/') //此时的url为https://www.abc.com/a/cc/
//例子2
history.pushState(null, null, '/bb/') //此时的url为https://www.abc.com/bb/

同样的,history 模式可以监听到对应的事件:

window.addEventListener("popstate", function() {
// 监听浏览器前进后退事件,pushState 与 replaceState 方法不会触发 
});

History 模式的注意点

和 Hash 模式相比,History 模式存在着更多的选择。但是也有一些自身的注意点:在用户点击强制刷新的时候,History 模式会向服务器发送请求。

为了解决这个问题,需要服务器做对应的处理。服务器可以针对不同的URL进行处理,当然,也可以简单处理:只要是未匹配到的URL请求,一律返回同一个 index.html 页面。

Vue Router 做了什么?

Vue Router 作为 Vue 生态系统中非常重要的一个成员,它实现了 Vue 应用的路由管理。可以说,Vue Router 是专门为 Vue 量身定制的路由管理器,功能点非常多。它的内部实现是与 Vue 自身是有强耦合关系的(Vue Router 内部利用了 Vue 的数据响应式)。
我们来看一个典型的 Vue Router 配置:

import Vue from "vue";
import App from "./vue/App.vue";
import VueRouter from 'vue-router';

//以插件的形式,使用VueRouter
Vue.use(VueRouter);

//路由配置信息,可以从外部文件引入,在此直接写是为了方便演示
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
const routes = [
 { path: '/', component: Foo },
 { path: '/bar', component: Bar }
]

//初始化并与 Vue 实例关联
const router = new VueRouter({routes});
new Vue({
 router,
 render: h => h(App),
}).$mount("#root");

可看出,VueRouter 是作为插件的形式引入到 Vue 系统内部的。而将具体的 router 信息嵌入到每个 Vue 实例中,则是作为 Vue 的构造函数参数传入。

同时来看看如何使用它:

//routerExample.vue
<template>
  <div>
    <h1 @click="goBack">App Test</h1>
    <router-link to="/">foo</router-link>
    <router-link to="/bar">bar</router-link>

    <router-view></router-view>
  </div>
</template>

<script>
export default {
 methods: {
  goBack() {
   console.log(this.$router); 
   window.history.length > 1 ? this.$router.go(-1) : this.$router.push('/')
  }
 }
}
</script>

<style lang="less" scoped>

</style>

上面的代码中,我们可以直接使用router-link和router-view这两个组件。它们是随着 Vue Router 一起引入的,作为全局组件使用。

这就是一个最简单的 Vue Router 的使用方式。我们下面就来看看,该如何自己实现上面的简单功能,做一个自己的 Vue Router。

一个简单的 Vue Router 实现

看了上面的这个过程,最简单的 Vue Router 应该包括以下实现步骤:

实现 Vue 规定的插件的写法,将我们自己的Vue Router 作为插件引入 Vue 系统中。

  • router功能一:解析传入的routes选项,以备调用
  • router功能二:监控URL变化(两种路由方式:history、hash)

实现两个全局组件:router-link和router-view

看看自定义的 Vue Router 的实现:

//FVueRouter.js

 let Vue; //保存 Vue 构造函数的引用,与 Vue 深度绑定

 class FVueRouter {
  constructor(options){
    this.$options = options;
    //保存路由的路径与路由组件的对应关系
    this.routerMap = {};

    //当前的URL必须是响应式的,使用一个新的 Vue 实例来实现响应式功能
    this.app = new Vue({
      data: {current : "/"}
    })
  }

  init(){
    //监听路由事件
    this.bindEvents();
    //解析传入的routes
    this.createRouterMap();
    //全局组件的声明
    this.initComponent();
  }

  bindEvents(){
    window.addEventListener('hashchange', this.onHashChange.bind(this));
  }

  onHashChange(){
    this.app.current = window.location.hash.slice(1) || '/';
  }

  createRouterMap(){
    this.$options.routes.forEach(route => {
      this.routerMap[route.path] = route;
    })
  }

  initComponent() {
    // 形式:<router-link to="/"> 转换目标=> <a href="#/" rel="external nofollow" >xxx</a>
    Vue.component("router-link", {
     props: {
      to: String,
     },
     render(h) {
      // h(tag, data, children)
      return h('a', {
        attrs: {href: '#' + this.to}
      }, [this.$slots.default])
     },
    });
    // 获取path对应的Component将它渲染出来
    Vue.component("router-view", {
      render: (h) => {
        //此处的this 能够正确指向 FVouter内部,是因为箭头函数
        const Component = this.routerMap[this.app.current].component;
        return h(Component)
      }
    })
   }
 }

 // 所有的插件都需要实现install 方法,传入参数是Vue的构造函数
 FVueRouter.install = function(_Vue){
  //将Vue的构造函数保存起来
  Vue = _Vue;

  //实现一个混入操作的原因,插件的install阶段非常早,此时并没有Vue实例
  //因此,使用mixin,延迟对应操作到Vue实例构建的过程中来执行。
  Vue.mixin({
    beforeCreate(){
      //获取到Router的实例,并将其挂载在原型上
      if(this.$options.router){
        //根组件beforeCreate时只执行一次
        Vue.prototype.$router = this.$options.router;

        this.init();
      }
    }
  })
 }

export default FVueRouter;

这里是最为简单的一种实现。有几个值得注意的点:

  • 如上代码,将最基本的一个Vue Router 的代码架子搭建起来了,能够运行。但细微处依然需要酌情考虑。
  • 关于插件的写法:自定义插件内部必须实现一个 install 方法,传入参数是Vue的构造函数。
  • 使用了一个新的Vue 实例,将 URL 的 hash 变量进行数据响应化处理。
  • 关于渲染函数 render 的参数 h,它实际上是 createElement 函数。具体用法值得深究。代码中使用的是最为简单的处理方式。

结尾

在本文中,我们讲解了 前端路由常见的两种模式:Hash 模式与 History 模式。同时,我们尝试自己实现了一个最为简单的 Vue Router。更多相关的 Vue Router 的细节,可以参考其官网。希望本文对你有用。

到此这篇关于Vue Router的手写实现方法实现的文章就介绍到这了,更多相关Vue Router手写内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JQuery 选择器 xpath 语法应用
May 13 Javascript
jquery 插件学习(二)
Aug 06 Javascript
JavaScript常用全局属性与方法记录积累
Jul 03 Javascript
用Js实现的动态增加表格示例自己写的
Oct 21 Javascript
js replace替换所有匹配的字符串
Feb 13 Javascript
基于AngularJS实现页面滚动到底自动加载数据的功能
Oct 16 Javascript
JavaScript实战之菜单特效
Aug 16 Javascript
js canvas仿支付宝芝麻信用分仪表盘
Nov 16 Javascript
微信小程序 九宫格实例代码
Jan 21 Javascript
基于javascript实现最简单选项卡切换
Feb 01 Javascript
小程序开发踩坑:页面窗口定位(相对于浏览器定位)(推荐)
Apr 25 Javascript
Vue ​v-model相关知识总结
Jan 28 Vue.js
ES6中Set和Map用法实例详解
Mar 02 #Javascript
Vue父组件向子组件传值以及data和props的区别详解
Mar 02 #Javascript
js中addEventListener()与removeEventListener()用法案例分析
Mar 02 #Javascript
js构造函数constructor和原型prototype原理与用法实例分析
Mar 02 #Javascript
原生js实现日历效果
Mar 02 #Javascript
js中火星坐标、百度坐标、WGS84坐标转换实现方法示例
Mar 02 #Javascript
详解Vue中的Props与Data细微差别
Mar 02 #Javascript
You might like
一步一步学习PHP(4) php 函数 补充2
2010/02/15 PHP
PHP利用超级全局变量$_GET来接收表单数据的实例
2016/11/05 PHP
Apply an AutoFormat to an Excel Spreadsheet
2007/06/12 Javascript
JavaScript入门教程(3) js面向对象
2009/01/31 Javascript
通用javascript脚本函数库 方便开发
2009/10/13 Javascript
理解JavaScript中的对象 推荐
2011/01/09 Javascript
css+js实现部分区域高亮可编辑遮罩层
2014/03/04 Javascript
js中对函数设置默认参数值的3种方法
2015/10/23 Javascript
JavaScript兼容浏览器FF/IE技巧
2016/08/14 Javascript
Vue.js 表单校验插件
2016/08/14 Javascript
总结javascript中的六种迭代器
2016/08/16 Javascript
jQuery下拉菜单的实现代码
2016/11/03 Javascript
jQuery 常见小例汇总
2016/12/14 Javascript
Bootstrap栅格系统简单实现代码
2017/03/06 Javascript
详解打造 Vue.js 可复用组件
2017/03/24 Javascript
jquery 键盘事件的使用方法详解
2017/09/13 jQuery
VsCode新建VueJs项目的详细步骤
2017/09/23 Javascript
vue中动态添加class类名的方法
2018/09/05 Javascript
Vue.js的复用组件开发流程完整记录
2018/11/29 Javascript
JS开发常用工具函数(小结)
2019/07/04 Javascript
vue动画—通过钩子函数实现半场动画操作
2020/08/09 Javascript
原生JavaScript实现刮刮乐
2020/09/29 Javascript
Python的迭代器和生成器使用实例
2015/01/14 Python
NetworkX之Prim算法(实例讲解)
2017/12/22 Python
Python操作Redis之设置key的过期时间实例代码
2018/01/25 Python
Pyspider中给爬虫伪造随机请求头的实例
2018/05/07 Python
python 利用浏览器 Cookie 模拟登录的用户访问知乎的方法
2019/07/11 Python
django-初始配置(纯手写)详解
2019/07/30 Python
HTML5添加鼠标悬浮音响效果不使用FLASH
2014/04/23 HTML / CSS
英国安全产品购物网站:The Safe Shop
2017/03/20 全球购物
意大利婴儿产品网上商店:Mukako
2018/10/14 全球购物
PatPat香港:婴童服饰和亲子全家装在线购物
2020/09/27 全球购物
如何保障Web服务器安全
2014/05/05 面试题
2014年医务科工作总结
2014/12/18 职场文书
项目合作意向书
2015/05/08 职场文书
JS精髓原型链继承及构造函数继承问题纠正
2022/06/16 Javascript