当前位置 : 主页 > 编程语言 > 其它开发 >

Vue Router 实现原理

来源:互联网 收集:自由互联 发布时间:2022-06-03
Vue Router 实现原理 会用到以下几个前置知识 插件 混入 Vue.observable() 插槽 render 函数 运行时和完整版的 Vue 概念 当前端路由切换的时候,在浏览器端判断当前路径,并加载当前路径对应
Vue Router 实现原理

会用到以下几个前置知识

  • 插件
  • 混入
  • Vue.observable()
  • 插槽
  • render 函数
  • 运行时和完整版的 Vue
概念

当前端路由切换的时候,在浏览器端判断当前路径,并加载当前路径对应的组件

Hash 模式
  • URL 中 # 后面的内容作为路径地址
  • 监听 hashchange 事件
  • 根据当前路由地址找到对应组件重新渲染
History 模式
  • 通过 history.pushState() 改变地址栏,不会向服务器发送请求
  • 监听 prpstate 事件
  • 根据当前路由地址找到对应组件重新渲染
简易版 Vue Router
// history 模式
// 新建一个 js 文件并导出一个 vueRouter 类
let _Vue = null
export default class VueRouter {
   static install (Vue) {
    // 接收两个参数,第一个 Vue 构造器,第二个可选的 options 对象
    // 1. 判断当前插件是否已经安装
    if(VueRouter.install.installed) return
    VueRouter.install.installed = true
    // 2. 把 Vue 构造函数记录到全局变量
    _Vue = Vue
    // 3. 把创建 Vue 实例的时候传入的 router 对象注入到 Vue 实例上
    _Vue.mixin({
        beforeCreate () {
            if(this.$options.router) {
                _Vue.prototype.$router = this.$options.router
                this.$options.router.init()
            }
        }
    })
   } 
   
   constructor (options) {
       this.options = options
       this.routeMap = {}
       this.data = _Vue.observable({
           current: '/'
       })
   }
   
   init () {
       this.createRouteMap()
       this.initComponents(_Vue)
       this.initEvent()
   }
   
   createRouteMap () {
       // 遍历所有的路由规则,把路由规则解析成键值对的形式存储到 routeMap 中
       this.options.routes.forEach(route => {
           this.routeMap[route.path] = route.component
       })
   }
   
   initComponents (Vue) {
       Vue.component('router-link', {
           props: {
               to: String
           },
           // template: '<a :href="to"><slot></slot></a>'
           render (h) {
               return h('a', {
                   attrs: {
                       href: this.to
                   },
                   on: {
                       click: this.clickHandler
                   }
               }, [this.$slots.default])
           },
           methods: {
               clickHandler (e) {
                   history.pushState({}, '', this.to)
                   this.$router.data.current = this.to
                   e.preventDefault()
               }
           }
       })
       const self = this
       Vue.component('router-view', {
           render(h) {
                const component = self.routeMap[self.data.current]
                return h(component)
           }
       })
   }
   
   initEvent () {
       window.addEventListener('popstate', () => {
           this.data.current = window.location.pathname
       })
   }
}
上一篇:leetcode 547. Number of Provinces 省份数量(中等)
下一篇:没有了
网友评论