自定义插件vue-router简单实现hashRouter设计思路

2023-12-13 03:39:01

步骤

1.挂载 vue.prototype.$router

2.声明两个组件

router-view this.$router.current=>component => h(component)

router-link h('a',{attrs:{href:'#'+this.to}},this.$slots.default)

3.url的监听:window hashchange的改变

4.定义响应式current,defineReactive()

实现VueRouter类

let Vue
// vueRouter是一个类,一个插件
class VueRouter {
    constructor(options) {
        this.$options = options
        
    }
}

VueRouter.install = function (_Vue) {
    //保存引用
    Vue = _Vue
    //挂在一下vueRouter到vue原型
    //利用全局混入,全局执行代码,在vue实例beforeCreate时获取到router,因为在main.js中生成vue实例在VueRouter挂载到Vue之后,所以常规无法获取到router,
    Vue.mixin({
        beforeCreate() {
            if (this.$options.router) { //避免每次实例创建都触发,只有根实例上存在的才触发。
                Vue.prototype.$router = this.$options.router
            }

        }
    })

    //声明两个全局组件,router-viewport,router-link
    Vue.component('router-link', {
        props: {
            to: {
                type: String,
                required: true
            }
        },
        //预编译情况下,template是不能使用的,这里要使用render
        // template:'<a>123</a>'
        render(h) {
            // return <a href={'#'+this.to}>{this.$slots.default}</a> jsx语法也可以使用
            return h('a', {
                attrs: { href: "#" + this.to }
            }, this.$slots.default) //this.$slots.default 获取内容
        }
    })
    Vue.component('router-view', {
        render(h) {
            return h('div', 'router-view')
        }
    })
}

export default VueRouter

这里有个难点,就是如何将router挂载到vue原型上,我们采用了mixin的用法,在vue实例beforeCreate时获取到router,并挂在到实例上。

怎么理解呢?在router.js中,Vue.use(VueRouter)触发install方法,但是在此时,并没有生成router,是在new VueRouter之后生成的router,并且挂载到了Vue,此时才有VueRouter,利用全局混入,延迟执行挂载到Vue原型上,这样就可以获取到router实例了。

import Vue from 'vue'
// import VueRouter from 'vue-router'
import VueRouter from '@/krouter/kvue-router'
Vue.use(VueRouter)//执行install方法,router还未被创建
const routes = [
    {
        path: '/home',
        name: 'home',
        component: () => import('@/components/Home.vue')
    },
    {
        path: '/about',
        name: 'about',
        component: () => import('@/components/About.vue')
    },
]

const router = new VueRouter({
    routes
})
export default router
import Vue from 'vue'
import App from './App.vue'
import router from './router/router'

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

监听url变化,渲染组件

class VueRouter {
    constructor(options) {
        this.$options = options
        //声明一个响应式current
        //渲染函数如果压重复执行,必须依赖响应式数据
        Vue.util.defineReactive(this,'current',window.location.hash.slice(1) || '/') //需要#后面的部分
        //监听url变化
        window.addEventListener('hashchange', () => {
            this.current = window.location.hash.slice(1)
        })
    }
}

这里使用Vue工具类定义响应式current,必须是响应式current,否则不生效,在router-view处读取并渲染对应组件,在这里Vue的原型对象已经挂载了this.$router,this.$router又是VueRouter的实例,所以在这上面能够找到对应的current属性,所以在current变化的时候,在引用到current的地方都会被通知到,然后渲染组件。

Vue.component('router-view', {
        render(h) {
            const obj = this.$router.$options.routes.find(el=>this.$router.current==el.path)
            return h(obj.component)
        }
    })

但是每次都要去遍历循环字典,也不是很合理,我们可以优化一下,缓存一下path和route映射关系

路由嵌套

思路:参考源码思路,给当前routerView深度标记,然后根据当前页面路由获取当前路由数组,其中包括一级和二级路由,然后使用depth获取对应的组件,然后并渲染。

Vue.component('router-view', {
        render(h) {
            //标记当前router-view深度
            this.$vnode.data.routerView = true
            let depth = 0
            let parent = this.$parent
            while (parent) {
                const vnodeData = parent.$vnode && parent.$vnode.data
                if (vnodeData) {
                    if (vnodeData.routerView) {
                        //说明当前的parent是一个routerView
                        depth++
                    }
                }
                parent = parent.$parent
            }


            let component = null
            const route = this.$router.matched[depth]
            if (route) {
                component = route.component
            }
            return h(component)
        }
    })

此时我们不再使用current来做响应式,使用matched数组获取匹配关系,VueRouter实例创建时调用match方法,获取路由数组,并且在路由发生变化时重新获取路由数组matched。

class VueRouter {
    constructor(options) {
        this.$options = options
        //声明一个响应式current
        //渲染函数如果压重复执行,必须依赖响应式数据
        // Vue.util.defineReactive(this,'current',window.location.hash.slice(1) || '/') //需要#后面的部分
        this.current = window.location.hash.slice(1) || '/' //初始值
        Vue.util.defineReactive(this, 'matched', [])
        // match方法可以递归的遍历路由表获取匹配关系的数组
        this.match()

        //监听url变化
        window.addEventListener('hashchange', () => {
            this.current = window.location.hash.slice(1)
            this.matched=[]
            this.match()
        })
    }
    match(routes) {
        routes = routes || this.$options.routes
        console.log(routes);

        //递归遍历路由表
        for (const route of routes) {
            if (this.current.indexOf(route.path)!=-1) {
                this.matched.push(route)
                if (route.children) {
                    this.match(route.children)
                }
                return
            }
        }
    }
}

附完整代码:

//vue-router插件
let Vue
// vueRouter是一个类,一个插件
class VueRouter {
    constructor(options) {
        this.$options = options
        //声明一个响应式current
        //渲染函数如果压重复执行,必须依赖响应式数据
        // Vue.util.defineReactive(this,'current',window.location.hash.slice(1) || '/') //需要#后面的部分
        this.current = window.location.hash.slice(1) || '/' //初始值
        Vue.util.defineReactive(this, 'matched', [])
        // match方法可以递归的遍历路由表获取匹配关系的数组
        this.match()

        //监听url变化
        window.addEventListener('hashchange', () => {
            this.current = window.location.hash.slice(1)
            this.matched=[]
            this.match()
        })
    }
    match(routes) {
        routes = routes || this.$options.routes

        //递归遍历路由表
        for (const route of routes) {
            if (this.current.indexOf(route.path)!=-1) {
                this.matched.push(route)
                if (route.children) {
                    this.match(route.children)
                }
                return
            }
        }
        console.log(this.matched);
    }
}

VueRouter.install = function (_Vue) {
    //保存引用
    Vue = _Vue
    //挂在一下vueRouter到vue原型
    //利用全局混入,全局执行代码,在vue实例beforeCreate时获取到router,因为在main.js中生成vue实例在VueRouter挂载到Vue之后,所以常规无法获取到router,
    Vue.mixin({
        beforeCreate() {
            if (this.$options.router) { //避免每次实例创建都触发,只有根实例上存在的才触发。
                Vue.prototype.$router = this.$options.router
            }

        }
    })

    //声明两个全局组件,router-viewport,router-link
    Vue.component('router-link', {
        props: {
            to: {
                type: String,
                required: true
            }
        },
        //预编译情况下,template是不能使用的,这里要使用render
        // template:'<a>123</a>'
        render(h) {
            // return <a href={'#'+this.to}>{this.$slots.default}</a> jsx语法也可以使用
            return h('a', {
                attrs: { href: "#" + this.to }
            }, this.$slots.default) //this.$slots.default 获取内容
        }
    })
    Vue.component('router-view', {
        render(h) {
            //标记当前router-view深度
            this.$vnode.data.routerView = true
            let depth = 0
            let parent = this.$parent
            while (parent) {
                const vnodeData = parent.$vnode && parent.$vnode.data
                if (vnodeData) {
                    if (vnodeData.routerView) {
                        //说明当前的parent是一个routerView
                        depth++
                    }
                }
                parent = parent.$parent
            }


            let component = null
            console.log(this.$router.matched);
            const route = this.$router.matched[depth]
            if (route) {
                component = route.component
            }
            return h(component)
        }
    })
}

export default VueRouter
import Vue from 'vue'
// import VueRouter from 'vue-router'
import VueRouter from '@/krouter/kvue-router'
Vue.use(VueRouter)//执行install方法,router还未被创建
const routes = [
    {
        path: '/home',
        name: 'home',
        component: () => import('@/components/Home.vue')
    },
    {
        path: '/about',
        name: 'about',
        component: () => import('@/components/About.vue'),
        children: [
            {
                path: '/about/info',
                component: {
                    render(h) {
                        return h('div', 'info page')
                    }
                }
            }
        ]
    },
]

const router = new VueRouter({
    routes
})
export default router

文章来源:https://blog.csdn.net/m0_59962790/article/details/134788868
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。