有学有练才叫学习:学而不思则罔,思而不学则殆:学而不习,纸上谈兵,习而不进,画地为牢!

Vue路由原理方法(深入理解Vue原理)

vue 炮渣日记 1个月前 (11-07) 30次浏览 已收录 0个评论 扫描二维码

说到vue-router就表明他只适合于vue和vue是强绑定的关系;不适合其他框架;

现在我们模仿实现一个VueRouter;

1.要使页面刷新;借助vue本身的响应式原理;

import Home from "./views/Home";
import About from "./views/About";
import Vue from "vue";   
class VueRouter{
    constructor(options){
        this.$options = options;
        this.routeMap = {}

        // 路由响应式 其实很重要的一部分是借助了 vue 的响应式原理 ; 强绑定 ; 必须用在vue上
        this.app = new Vue({
            data:{
                current:"/"
            }
        })
    }
}

VueRouter.install=function(Vue){
    //mixin 混入
    Vue.mixin({
        beforeCreate() {
            // this 是vue 实咧
            if(this.$options.router){  // 只在跟组件执行一次
                Vue.prototype.$router = this.$options.router;
                this.$options.router.init()
            }
        },
    }) 

}
Vue.use(VueRouter)
export default new VueRouter({
    routes: [{ path: "/", component: Home }, { path: "/about", component: About }]
})

2.执行上面的init函数;初始化

//这里主要三件事;监听url变化;解析路由配置;实现两个组件
init(){
        this.bindEvents() ; //监听url变化
        this.createRouteMap(this.$options) ; //解析路由配置
        this.initComponent() ; //实现两个组件 router-view  router-link
    }

3.监听url变化;更新数据

  bindEvents(){
        window.addEventListener('load',this.onHashChange.bind(this))
        window.addEventListener('hashchange',this.onHashChange.bind(this))
    }
    onHashChange(){
        this.app.current = window.location.hash.slice(1) || '/';  // #/about  ==> /about
    }

4.解析路由配置;

//这个好理解;就是把传进来的路由配置;解析成path-->component的key:value形式
createRouteMap(options){
        options.routes.forEach(item=>{
            this.routeMap[item.path] = item.component
        })
  }

5.实现router-link 和 router-view两个组件

 initComponent(){
        // router-view router-link
        Vue.component('router-link',{  
            props:{to:String},
            render(h) {
                // h => createElement  h(tag,data,children)
                return h('a',{attrs:{href:'#'+this.to}},[
                    this.$slots.default
                ])
            },
        });
        Vue.component('router-view',{     //这里没有解决路由嵌套的问题   // 全局的组件 任意data 的都会出发全局组件的跟新
            render:h=>{
                console.log(this.routeMap[this.app.current])
                const comp = this.routeMap[this.app.current]
                return h(comp)
            },
        })
    }

vue-router的hash模式主要就是监听了hashchange方法;改变当前的路径,再利用vue自身的响应式原理;来刷新视图;

vue-history模式;要服务器配合;访问进来是指向同一个html;代码上处理原理我想和hash应该类似;大家可以自己研究一下;

喜欢 (0)
炮渣日记
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址