标签：Vue component current router Router 原理 options 路由

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
       })
   }
}

标签：Vue,component,current,router,Router,原理,options,路由
来源： https://www.cnblogs.com/earthZhang/p/16335164.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。