vue-router原理及其核心功能实现

阿北smile 2020/5/28 11:26:20

路由是什么? 自从网站,web等诞生开始,路由就一直存在;在前后端分离之前,一般提到的路由都是后端路由;路由通过一个请求,然后分发到指定的路径,匹配对应的处理程序;它的作用就是分发请求,把对应的请求分发到对应的位置 前端路由与后端路由 后端路由 后端路由可以…

路由是什么?

自从网站,web等诞生开始,路由就一直存在;在前后端分离之前,一般提到的路由都是后端路由;路由通过一个请求,然后分发到指定的路径,匹配对应的处理程序;它的作用就是分发请求,把对应的请求分发到对应的位置

前端路由与后端路由

后端路由

后端路由可以理解为服务器将浏览器请求的url解析之后映射成对应的函数,这个函数会根据资源类型的不同进行不同的操作,如果是静态资源,那么就进行文件读取,如果是动态数据,那么就会通过数据库进行一些增删查改的操作

后端路由的优点是利于SEO且安全性较高;缺点就是代码耦合度高,加大了服务器压力,且http请求受限于网络环境,影响用户体验

前端路由

随着前端单页应用(SPA)的兴起,前端页面完全变成了组件化,不同的页面就是不同的组件,页面的切换就是组件的切换;页面切换的时候不需要再通过http请求,直接通过JS解析url地址,然后找到对应的组件进行渲染

前端路由与后端路由最大的不同就是不需要再经过服务器,直接在浏览器下通过JS解析页面之后就可以拿到相应的页面

前端路由的优点就是组件切换不需要发送http请求,切换跳转快,用户体验好;缺点就是没有合理的利用缓存且不利于SEO

前端路由模式

hash模式

hash模式是vue-router的默认路由模式,它的标志是在域名之后带有一个#

http://localhost:8888/#/home
复制代码

通过window.location.hash获取到当前url的hash;hash模式下通过hashchange方法可以监听url中hash的变化

window.addEventListener("hashchange", function(){}, false)
复制代码

hash模式的特点是兼容性更好,并且hash的变化会在浏览器的history中增加一条记录,可以实现浏览器的前进和后退功能;

缺点由于多了一个#,所以url整体上不够美观

history模式

history模式是另一种前端路由模式,它基于HTML5的history对象

通过location.pathname获取到当前url的路由地址;history模式下,通过pushStatereplaceState方法可以修改url地址,结合popstate方法监听url中路由的变化

history模式的特点是实现更加方便,可读性更强,同时因为没有了#,url也更加美观;

它的劣势也比较明显,当用户刷新或直接输入地址时会向服务器发送一个请求,所以history模式需要服务端同学进行支持,将路由都重定向到根路由

vue-router工作流程

  1. url改变
  2. 触发事件监听
  3. 改变vue-router中的current变量
  4. 监视current变量的监视者
  5. 获取新的组件
  6. render

Vue插件基础知识

Vue.use()

Vue.use()方法用于插件安装,通过它可以将一些功能或API入侵到Vue内部;

它接收一个参数,如果这个参数有install方法,那么Vue.use()会执行这个install方法,如果接收到的参数是一个函数,那么这个函数会作为install方法被执行

install方法在执行的时候也会接收到一个参数,这个参数就是当前Vue的实例

通过接收到的Vue实例,可以定义一些全局方法或属性,也可以通过prototype对Vue的实例方法进行扩展

class vueRouter {
    constructor(){
    }
}
vueRouter.install = function(Vue) {
    
}
复制代码

Vue.mixin()

Vue.mixin()方法用于注册全局混入,它接收一个对象作为参数,我们将这个对象称为混入对象;混入对象可以包含组件的任意选项;通过混入对象定义的属性和方法在每一个组件中都可以访问到

<!-- router.js -->
class vueRouter {
    constructor(){
    }
}
vueRouter.install = function(Vue) {
    Vue.mixin({
        data(){
            return {
                name: '阿白smile'
            }
        }
    })
}

<!-- home.vue -->
// 省略代码
<script>
    export default {
        created(){
            console.log(name)   // '阿白smile'
        }
    }
</script>
复制代码

实现一个routerJs

通过前面的前置知识,已经对路由有了一些了解,接下来就开始实现一个routerJs

先来看一下vue-router的使用方法,然后再基于此进行一步一步的拆解分析

<!-- index.js -->
import vueRouter from './router'
import App from 'app.vue'
Vue.use(vueRouter)

const router = new vueRouter({
    routes: []
})

new Vue({
    router,
    render: h => h(App)
})
复制代码

在上面的使用示例中可以看出,通过Vue.use()方法将vueRouter安装为插件;通过插件的安装即可以在全局使用vueRouter的方法及相关组件;

install方法

首先需要先实现install方法,通过install向全局注入vueRouter

<!-- router.js -->
class vueRouter {
    constructor(){}
}
vueRouter.install = function(Vue) {
    Vue.mixin({
        beforeCreate(){
            // $options.router存在则表示是根组件
            if (this.$options && this.$options.router) {
                this._root = this
                this._router = this.$options.router
                Vue.util.defineReactive(this, 'current', this._router.history)
            } else {
                // 不是根组件则从父组件中获取
                this._root = this.$parent._root
            }
            
            // 使用$router代理对this._root._router的访问
            Object.defineProperty(this, '$router', {
                get() {
                    return this._root._router
                }
             })
        }
    })
}
复制代码

install方法接收一个Vue实例作为参数,通过Vue.mixin()全局混入beforeCreated生命周期钩子;通过Vue实例暴露的工具方法defineReactivecurrent属性变成一个监视者

为了避免在使用过程中对_router的修改,所以通过Object.defineProperty设置一个只读属性$router,并使用它代理对this._root._router的访问

router初始化

vue-router在初始化的时候需要通过new操作符,所以需要提供一个vueRouter类并暴露给外部使用;同时还需要一个history类来保存当前的路由路径

class HistoryRoute {
    constructor() {
        this.current = null
    }
}
class vueRouter {
    // options 为初始化时的参数
    constructor(options) {
        this.mode = options.mode || 'hash'
        this.routes = options.routes || []
        this.history = new HistoryRoute
        this.init()
    }
    init() {
        if (this.mode === 'hash') {
            // 初始化一个#
            location.hash ? '' : location.hash = '/'
            // 页面加载完成获取当前路由
            window.addEventListener('load', () => {
                this.history.current = location.hash.slice(1)
            })
            window.addEventListener('hashchange', () => {
                this.history.current = location.hash.slice(1)
            })
        } else {
            window.addEventListener('load', () => {
                this.history.current = location.pathname
            })
            window.addEventListener('popstate', () => {
                this.history.current = location.pathname
            })
        }
    }
}
export default vueRouter
复制代码

在上面的代码中,创建一个HistoryRoute类,HistoryRoutecurrent属性储存当前路由,在install方法会让这个值实现可响应并监视它的变化,并根据它的变化渲染不同的组件

vueRouter在实例化时接收到一个options对象作为初始化的参数,options中指定了路由模式(mode)和路由表(routes);如果options中没有指定moderoutes,则mode默认为hash模式,routes默认为[]

init方法会根据不同的路由模式在页面加载完成后设置current,同时还会为路由的变化添加事件监听,确保及时更新current属性然后渲染组件

router-view组件与路由渲染

router-view组件的实现依赖于Vue.component()方法,通过这个方法向全局注册一个组件,需要注意的是Vue的全局组件注册需要在Vue实例化之前进行;

Vue.component方法接收两个参数,第一个是组件的名称,另一个是组件的选项对象;

router-view组件的作用是根据路由的变化渲染出路由所对应的组件,所以在注册时候主要是使用到选项对象中的render函数

Vue.component('router-view', {
    render(h) {
          
    }
})
复制代码

接下来就需要实现router-view组件最重要的功能,如何找到需要渲染的组件?

可以知道的是,当路由变化的时候可以获取到最新的路由地址,同时也可以访问到routes(路由表)的数据

所以只需要根据路由地址从路由表中拿到相应的组件然后交给render函数执行就可以了

根据路由从路由表中获取组件有两种方式:

一种是路由每次变化的时候都是用find方法从路由表中查询一次,获取到路由对象,这种方式虽然可行,但是每次路有变化都去查询一次性能消耗太大;

另一种方式则是将路由与它所对应的组件以键值对的方式进行储存,路由变化的时候只需要根据路由地址进行查询即可;这种方式只需要遍历一次,路由变化时直接使用键值对的方式获取组件,能够非常有效的提高渲染速度

class vueRouter {
    constructor(options) {
        // 省略其他代码
        this.routes = options.routes || []
        this.routeMap = this.createMap(this.routes)
    }
    // 省略其他代码
    createMap(routes) {
        return routes.reduce((memo, current) => {
            memo[current.path] = current.component
            return memo
        }, {})
    }
}
复制代码

至此,所有的路由都已经使用键值对的方式存入routeMap中,接下来就可以使用render函数进行组件渲染了

vueRouter.install = function(_Vue) {
    // 省略其他代码
    Vue.component('router-view', {
        render(h) {
            let current = this._self._root._router.history.current  // 当前路由
            let routerMap = this._self._root._router.routeMap
            return h(routerMap[current])
        }
    })
}  
复制代码

到这里,router-view组件就封装完成了,它可以在任何一个组件中使用,并根据路由的变化而渲染不同的组件

push方法和replace方法

vue-router中,无论是声明式的路由跳转还是编程式的路由跳转,都需要通过这两个方法参与来完成;

history模式下, 路由切换通过window.history.pushState方法完成;在hash模式下,路由的切换是直接通过hash值的变化来实现

pushState

pushState是H5引入的新方法,主要用于添加历史记录条目;

它接收三个参数,分别是状态对象标题URL;由于第二个参数(标题)在部分浏览器上会被忽略,所以在这里主要了解一下状态对象和URL

stateObj 状态对象,它会与历史记录条目相关联;popstate事件触发时,状态对象会传入回调函数;浏览器会将这个状态对象序列化以后保存在本地,重新载入这个页面的时候可以拿到这个对象

URL 新历史记录的URL,必须与当前页面处在同一个域;浏览器的地址栏会显示这个地址

class vueRouter {
    constructor(options) {}
    push(url) {
        if (this.mode === 'hash') {
            location.hash = url
        } else {
            pushState(url)
        }
    }
  replace(url) {
      if (this.mode === 'hash') {
          location.hash = url
      } else {
          pushState(url, true)
      }
  }
}

function pushState(url, replace) {
    const history = window.history
    if (replace) {
        history.replaceState({key: history.state.key}, '', url)
    } else {
        history.pushState({key: Date.now()}, '', url)
    }
}
复制代码

在上面的代码中,hash模式下直接通过location修改hash值,通过hash值的变化去改变视图组件,另外还封装了一个pushState方法统一负责history模式下的页面跳转,并通过一个replace参数判断使用哪种方式进行跳转;

router-link的实现

router-link也是通过Vue.component()方法注册的一个全局组件

Vue.component('router-link', {
    render(h) {
          
    }
})
复制代码

router-link接收一些props参数,这里列举几个常用的,全部参数可以查看官方文档

to: 目标路由地址
tag: 渲染的标签
replace: 使用replace方式进行路由跳转,不留下history记录
复制代码

接下来开始实现一个简单router-link组件

Vue.component('router-link', {
    props: {
        to: {
            type: [Object, String],
            required: true
        },
        tag: {
            type: String,
            default: 'a'
        },
        replace: Boolean
    },
    render(h) {
          let data = {}
          if (this.tag === 'a') {
              data.attrs = {href: this.to}
          } else {
              data.on = {click: () => {
                  if (this.replace) {
                      this._self._root._router.replace(this.to)
                  } else {
                      this._self._root._router.push(this.to)
                  }
              }}
          }
          return h(this.tag, data, this.$slots.default)
    }
})
复制代码

router-link组件通过参数to设置目标路由,tag参数负责组件在页面上渲染的标签,默认为a标签,replace参数则负责控制在路由跳转时是否使用replace方法

render函数中根据不同的tag进行不同的数据拼接,在改变路由时,默认的a标签可以直接设置href属性,而其他标签则需要监听事件,然后使用router的路由跳转方法进行路由切换

到此就已经实现了vue-router的核心的路由监听,跳转,切换,组件渲染等功能,先到浏览器中看一下效果

routerTest.gif

写在最后

本文从路由的起源开始说起,到前后端路由的区别及优缺点,然后介绍了vue-router的工作流程并实现了vue-router中一些核心的方法及其原理

文章中涉及到的源码已提交到我的Github

End

随时随地学软件编程-关注百度小程序和微信小程序
关于找一找教程网

本站文章仅代表作者观点,不代表本站立场,所有文章非营利性免费分享。
本站提供了软件编程、网站开发技术、服务器运维、人工智能等等IT技术文章,希望广大程序员努力学习,让我们用科技改变世界。
[vue-router原理及其核心功能实现]http://www.zyiz.net/tech/detail-137611.html

上一篇:Vue项目优化总结

下一篇:js如何实现一个对象的深拷贝

赞(0)

共有 条评论 网友评论

验证码: 看不清楚?
    关注微信小程序
    程序员编程王-随时随地学编程

    扫描二维码或查找【程序员编程王】

    可以随时随地学编程啦!

    技术文章导航 更多>
    扫一扫关注最新编程教程