Vue 进阶 [五] 手写VueRouter

梦里梦外; 2022-12-10 03:52 250阅读 0赞

> 人生当自勉，学习需坚持。

# 定义 #

Vue Router 是 [Vue.js][] 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：

*  嵌套的路由/视图表
 *  模块化的、基于组件的路由配置
 *  路由参数、查询、通配符
 *  基于 Vue.js 过渡系统的视图过渡效果
 *  细粒度的导航控制
 *  带有自动激活的 CSS class 的链接
 *  HTML5 历史模式或 hash 模式，在 IE9 中自动降级
 *  自定义的滚动条行为

# VueRouter使用的核心步骤 #

**步骤一：**使用vue-router 插件，router.js

> import Router from 'vue-router'  
> Vue.use(Router)

**步骤二：**创建Router 实例，router.js

> export default new Router(\{...\})

**步骤三：**在组件上添加该实例，main.js

> import router from './router'  
> new Vue(\{  
> router,  
> \}).$mount("\#app");

**步骤四：**添加路由视图 App.vue

> <router-view></router-view>

**导航：**

> <router-link to="/">Home</router-link>  
> <router-link to="/about">About</router-link>

# vue-router 手动实现 #

### 需求分析 ###

*  作为一个插件存在：实现VueRouter类和install方法
 *  实现两个全局组件：router-view用于显示匹配组件内容，router-link用于跳转
 *  监控url变化：监听hashchange或popstate事件
 *  响应最新url：创建一个响应式的属性current，当它改变时获取对应组件并显示

### 实现一个插件：创建VueRouter类和install方法 ###

let Vue; // 引用构造函数，VueRouter中要使用
    // 保存选项
    class VueRouter {
    constructor(options) {
    this.$options = options;
    }
    }
    // 插件：实现install方法，注册$router
    VueRouter.install = function(_Vue) {
    // 引用构造函数，VueRouter中要使用
    Vue = _Vue;
    Vue.mixin({
    beforeCreate() {
    // 只有根组件拥有router选项
    if (this.$options.router) {
    // vm.$router
    Vue.prototype.$router = this.$options.router;
    }
    }
    });
    };
    export default VueRouter;

### 创建router-view和router-link ###

zrouter-link.js

export default {
        props: {
            to: {
                type: String,
                required: true
            },
        },
        render(h) {
            // <a href="#/about">abc</a>
            // <router-link to="/about">xxx</router-link>
            // h(tag, data, children)
            console.log(this.$slots);
            return h('a', {
                attrs: {
                    href: '#' + this.to
                }
            }, this.$slots.default)
            // return <a href={'#' + this.to}>{this.$slots.default}</a>
        }
    }

zrouter-view.js

export default {
        render(h) {
            //获取path对应的component
            const {
                routeMap,
                current
            } = this.$router;
            console.log(routeMap, current);
    
            const component = routeMap[current].component || null;
            return h(component)
        }
    }

### 监控url变化 ###

定义响应式的current属性，监听hashchange事件

class VueRouter {
    constructor(options) {
    // current应该是响应式的
    Vue.util.defineReactive(this, 'current', '/')
    // 定义响应式的属性current
    const initial = window.location.hash.slice(1) || '/'
    Vue.util.defineReactive(this, 'current', initial)
    // 监听hashchange事件
    window.addEventListener('hashchange', this.onHashChange.bind(this))
    window.addEventListener('load', this.onHashChange.bind(this))
    }
    onHashChange() {
    this.current = window.location.hash.slice(1)
    }
    }

### 创建路由映射表 ###

//创建一个路由映射表
            this.routeMap = {}
            options.routes.forEach(route => {
                this.routeMap[route.path] = route
            })

### 较完整代码 ###

import Link from './zrouter-link'
    import View from './zrouter-view'
    //1、实现一个插件：挂载$router ==>实现install 方法
    let Vue
    class ZVueRouter {
        constructor(options) {
            this.$options = options
            //需要创建响应式的current属性
            Vue.util.defineReactive(this, 'current', '/')
            // this.current = '/'
            // 监听URL的变化
            window.addEventListener('hashchange', this.onHashChange.bind(this))
            window.addEventListener('load', this.onHashChange.bind(this))
    
            //创建一个路由映射表
            this.routeMap = {}
            options.routes.forEach(route => {
                this.routeMap[route.path] = route
            })
        }
        onHashChange() {
            console.log(window.location.hash)
            this.current = window.location.hash.slice(1)
        }
    }
    ZVueRouter.install = function (_Vue) {
        //保存构造函数，在ZVueRouter中使用
        Vue = _Vue
        //挂载$router
        // 怎么获取根实例中的router 选项 使用全局混入
        //
        Vue.mixin({
            //此处写的生命周期的钩子 会在所有组件中都执行一遍
            beforeCreate() {
                // console.log(this)
                // 确保根实例的时候才执行
                if (this.$options.router) {
                    Vue.prototype.$router = this.$options.router
                }
            },
        })
    
        //任务2、实现两个全局组件router-link 和 router-view
        // Vue.component('router-link', {
        //     props: {
        //         to: {
        //             type: String,
        //             required: true,
        //         },
        //     },
        //     render(h) {
        //         // 希望渲染出一个a 标签
        //         // h(tag,data,children)
        //         //<router-link to='/about'></router-link>
        //         //   console.log(this.$slots)
        //         return h('a', {
        //             attrs: {
        //                 href: "#" + this.to
        //             }
        //         }, this.$slots.default)
        //     },
        // })
    
        // Vue.component('router-view', {
        //     render(h) {
        //         // 获取path 对应的component
        //         // let component = null
        //         console.log(this)
        //         console.log('router-view this.$router', this.$router)
        //         // this.$router.$options.routes.forEach((route) => {
        //         //     if (route.path === this.$router.current) {
        //         //         component = route.component
        //         //     }
        //         // })
        //         // 以上这样写每次渲染都需要遍历找一遍 优化
        //         const {
        //             routeMap,
        //             current
        //         } = this.$router
        //         const component = routeMap[current].component || null;
        //         return h(component)
        //     },
        // })
    
        // 将router-link router-view 单抽取出来
        Vue.component('router-link', Link)
        Vue.component('router-view', View)
    
    }
    export default ZVueRouter

# 代码地址 #

[https://gitee.com/xiaozhidayu/vue-study-component][https_gitee.com_xiaozhidayu_vue-study-component]

[https://gitee.com/xiaozhidayu/vue-study-component.git][https_gitee.com_xiaozhidayu_vue-study-component.git]

> 人生就是一场马拉松。领先时不必沾沾自喜，落后时也不用慌乱着急，此刻的得失成败，不代表最终的成绩。把鲜花和掌声当作前进的动力，把挫折和失败化为奋进的勇气，只要不放弃，再平凡的人生也能创造奇迹

[Vue.js]: http://cn.vuejs.org/
[https_gitee.com_xiaozhidayu_vue-study-component]: https://gitee.com/xiaozhidayu/vue-study-component
[https_gitee.com_xiaozhidayu_vue-study-component.git]: https://gitee.com/xiaozhidayu/vue-study-component.git