Vue Router的手写实现方法实现

为什么需要前端路由

在前后端分离的现在,大部分应用的展示方式都变成了 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手写内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

时间: 2020-03-01

详解vue-router 2.0 常用基础知识点之router-link

前端采用前后端分离的方式进行开发,我们使用vue2.0框架,做单页面应用难免会用到vue-router,今天把项目中的用到router-link摘出来,一是想整理一下这些用法,方便下次快速查找,二是重新再过一下vue-router,增加熟悉度.也希望下面这些例子能帮到其他使用vue-router的朋友. 1,$route.params 类型: Object 一个 key/value 对象,包含了 动态片段 和 全匹配片段,如果没有路由参数,就是一个空对象. path: '/detail/:id'

Vue学习笔记进阶篇之vue-router安装及使用方法

介绍 vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用.vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来.传统的页面应用,是用一些超链接来实现页面切换和跳转的.在vue-router单页面应用中,则是路径之间的切换,也就是组件的切换. 本文是基于上一篇文章(Vue学习笔记进阶篇--vue-cli安装及介绍)vue-cli脚手架工具的. 安装 在终端通过cd命令进入到上一篇文章中创建的my-demo1项目目录里

详解vue2路由vue-router配置(懒加载)

vue路由配置以及按需加载模块配置 1.首先在component文件目录下写俩组件: First.vue: <template> <div>我是第一个页面</div> </template> <script> export default { name: 'first', data () { return { msg: 'Welcome to Your Vue.js App' } } } </script> <!-- Add &

Vue-Router来实现组件间跳转的三种方法

通过VueRouter来实现组件之间的跳转,供大家参考,具体内容如下 提供了3种方式实现跳转: ①直接修改地址栏中的路由地址 <!doctype html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="js/vue.js"></script> <!-- 引入文件 --> &

vue-router:嵌套路由的使用方法

模板抽离 我们已经学习过了Vue模板的另外定义形式,使用<template></template>. <!-- 模板抽离出来 --> <template id="home"> <div>首页</div> </template> <template id="news"> <div>新闻</div> </template> 然后js里定义路

Vue系列:通过vue-router如何传递参数示例

使用vue-router 来实现webapp的页面跳转,有时候需要传递参数,做法如下: 参考文献:http://router.vuejs.org/en/named.html 主要有以下几个步骤: (1) 设置好路由配置 router.map({ '/history/:deviceId/:dataId': { name: 'history', // give the route a name component: { ... } } }) 这里有2个关键点: a)给该路由命名,也就是上文中的 na

Vue.js实战之利用vue-router实现跳转页面

前言 使用 Vue.js 做项目的时候,一个页面是由多个组件构成的,所以在跳转页面的时候,并不适合用传统的 href,于是 vue-router 应运而生. 官方文档: https://router.vuejs.org/zh-cn/essentials/getting-started.html 这次的实例主要实现下图的效果: 项目结构: 一.配置 Router 用 vue-cli 创建的初始模板里面,并没有 vue-router,需要通过 npm 安装 cnpm i vue-router -D

vue-router跳转页面的方法

使用 Vue.js 做项目的时候,一个页面是由多个组件构成的,所以在跳转页面的时候,并不适合用传统的 href,于是 vue-router 应运而生 官方文档请点击这里 ## vue-router 第一步当然是安装了,用npm安装命令 npm install vue-router --save-dev 第二步在.vue组件里添加标签,格式如下 <div id="app"> <p> <!-- 使用 router-link 组件来导航. --> <

VueJs路由跳转——vue-router的使用详解

对于单页应用,官方提供了vue-router进行路由跳转的处理,本篇主要也是基于其官方文档写作而成. 安装 基于传统,我更喜欢采用npm包的形式进行安装. npm install vue-router --save 当然,官方采用了多种方式进行安装,包括bower,cdn等. 基本用法 在HTML文档中使用,只需要利用v-link这个directive就行了,如: <a v-link="{path: '/view-a'}">Go to view-a</a> ​p

详解vue-router 2.0 常用基础知识点之router.push()

除了使用 <router-link> 创建 a 标签来定义导航链接,我们还可以借助 router 的实例方法,通过编写代码来实现. router.push(location) 想要导航到不同的 URL,则使用 router.push 方法.这个方法会向 history 栈添加一个新的记录,所以,当用户点击浏览器后退按钮时,则回到之前的 URL. 当你点击 <router-link> 时,这个方法会在内部调用,所以说,点击 <router-link :to="...&

详解Vue.js 2.0 如何使用axios

Vue.js 1.0 我们常使用 vue-resource (官方ajax库), Vue 2.0 发布后作者宣告不再对 vue-resource 进行更新, 推荐我们使用 axios (基于 Promise 的 HTTP 请求客户端,可同时在浏览器和 node.js 中使用) 安装 axios 使用 npm npm install axios 使用 yarn yarn add axios 使用 axios 如同使用 vue-resource 一样使用 main.js import axios f

详解Vue CLI 3.0脚手架如何mock数据

前后端分离的开发模式已经是目前前端的主流模式,至于为什么会前后端分离的开发我们就不做过多的阐述,既然是前后端分离的模式开发肯定是离不开前端的数据模拟阶段. 我们在开发的过程中,由于后台接口的没有完成或者没有稳定之前我们都是采用模拟数据的方式去进行开发项目,这样会使我们的前后端会同时的进行,提高我们的开发效率. 因为最近自己在自学 Vue 也在自己撸一个项目,肯定会遇到使用数据的情况,所以就想着如何在前端做一些 mock 数据的处理,因为自己的项目使用的是 vue/cli 3.0 与 vue/cl

详解vue-router 2.0 常用基础知识点之导航钩子

导航钩子 vue-router 提供的导航钩子主要用来拦截导航,让它完成跳转或取消.有多种方式可以在路由导航发生时执行钩子:全局的, 单个路由独享的, 或者组件级的. 全局钩子 const router = new VueRouter({ ... }) router.beforeEach((to, from, next) => { // do something next(); }); router.afterEach((to, from, next) => { console.log(to.

详解vue组件基础

什么是组件 组件(Component)是对数据和方法的简单封装.web中的组件其实可以看成是页面的一个组成部分,它是一个具有独立的逻辑和功能的界面,同时又能根据规定的接口规则进行相互融和,最终成为一个完整的应用,页面就是由一个个类似这样的组成部分组成的,比如导航.列表.弹窗.下拉菜单等.页面只不过是这样组件的容器,组件自由组合形成功能完整的界面,当不需要某个组件,或者想要替换某个组件时,可以随时进行替换和删除,而不影响整个应用的运行..前端组件化的核心思想就是将一个巨大复杂的东西拆分成粒度合理的

详解 vue.js用法和特性

前  言 最近用Vue.js做了一个数据查询平台,还做了一个拼图游戏,突然深深的感到了vue的强大. Vue.js是一套构建用户界面(user interface)的渐进式框架.与其他重量级框架不同的是,Vue 从根本上采用最小成本.渐进增量(incrementally adoptable)的设计.Vue 的核心库只专注于视图层,并且很容易与其他第三方库或现有项目集成.另一方面,当与单文件组件和 Vue 生态系统支持的库结合使用时,Vue 也完全能够为复杂的单页应用程序提供有力驱动. Vue.j

详解Vue文档中几个易忽视部分的剖析

针对Vue文档中部分大家可能不会去研读的内容,我做了个小总结,作为有经验者的快餐,不是特别适合初学者,可能有不妥之处,希望大家多提建议. 节省代码量的mixin mixin概念:组件级可复用逻辑,包括数据变量/生命周期钩子/公共方法,从而在混入的组件中可以直接使用,不用重复写冗余逻辑(类似继承) 使用方法: 在某一公共文件夹pub下创建mixin文件夹,其下创建mixinTest.js const mixinTest = { created() { console.log(`components

详解vue表单——小白速看

一.基本用法 你可以用 v-model 指令在表单 <input> 及 <textarea> 元素上创建双向数据绑定. 但 v-model 本质上不过是语法糖.它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理. v-model 会忽略所有表单元素的 value.checked.selected 特性的初始值而总是将 Vue 实例的数据作为数据来源.你应该通过 JavaScript 在组件的 data 选项中声明初始值. 一组代码,看完text.textarea.

详解vue的数据binding绑定原理

自从angular火了以后,各种mvc框架喷涌而出,angular虽然比较火,但是他的坑还是蛮多的,还有许多性能问题被人们吐槽.比如坑爹的脏检查机制,数据binding是受人喜爱的,脏检查就有点-性能低下了.有时候改了一个地方,脏循环要循环多次来保证数据是不是真的变了和是否停止变化了.这样性能就很低了.于是人们开始钻研新的双向数据binding的方法.尤大的vue binding就是本人蛮喜欢的一种实现方式,本文跟随尤大的一个例子来详解vue的数据binding的原理. 数据binding,一般