vue中两种路由模式的实现详解

//router/index.js
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export const routeMap= [
     {
         path: '/home',
         component: () => import('../components/Home/Home.vue')
     },
     {
         path: '/list',
         component: () => import('../components/List/List.vue')
    },
]
const router = new Router({
    routes: constantRouterMap
})
export default router
//main.js
import router from './router'
new Vue({
  router,
  store,
  render: h => h(App),
}).$mount('#app')

<div>
    <router-link to="/home">首页</router-link>
    <router-link to="/list">列表</router-link>
    <hr>
    <router-view></router-view>
</div>

VueRouter.install = function (_Vue) {
    //1、保存Vue
    Vue = _Vue
    //2、将以下代码延迟到vue实例初始化完毕执行
    Vue.mixin({
        beforeCreate() {
            //判断如果有router属性就执行下方代码
            if (this.$options.router) {
                Vue.prototype.$router = this.$options.router;
            }
        }
    })
    //创建全局组件router-link和router-view
    //创建router-link组件
    Vue.component('router-link', {
        props: {
            to: {
                type: String | Object,
                required: true
            }
        },
        render(h) {// h 有三个参数，第一个参数创建的元素，第二个参数元素具有的属性, 第三个参数元素的内容
            return h('a', { attrs: { href: '#' + this.to } }, this.$slots.default)
        }
    })
    //创建router-view组件
    Vue.component('router-view', {
        // 组件要重新渲染，必须要让数据发生改变的时候，重新去执行render函数
        render(h) {
            const router = this.$router
            console.log(router.routesMap, 'routesMap');
            let component = router.routesMap[router.current];//组件
            //获取到外部传递的路由表
            return h(component)
        }
    })
}

//plugin/router.js
let Vue;
class VueRouter {
    constructor(options) {
        //保存选项
        this.options = options;
        // console.log(options, '路由数据');
        // 定义一个响应式的变量current，保存当前的hash值
        let url = location.hash.slice(1,) || '/';
        // defineReactive定义响应式的对象
        Vue.util.defineReactive(this, 'current', url)
        // hashchange事件来监听hash值的变化, 注意this指向问题
        addEventListener('hashchange', this.changeHash.bind(this))
        this.routesMap = {};
        //对routes中的对象做一个映射：routesMap = {'/home':component,'/list': component}
        this.options.routes.forEach(route => {
            this.routesMap[route.path] = route.component
        })
    }
    //监听hash值变化的函数
    changeHash() {
        //通过location.hash来获取到hash值
        this.current = location.hash.slice(1,)
        console.log(this.routesMap, '555');
        // console.log(this.current);//当前path路径
    }
}
VueRouter.install = function (_Vue) {
    //1、保存Vue
    Vue = _Vue
    //2、将以下代码延迟到vue实例初始化完毕执行
    Vue.mixin({
        beforeCreate() {
            //判断如果有router属性就执行下方代码
            if (this.$options.router) {
                Vue.prototype.$router = this.$options.router;
            }
        }
    })
    //创建全局组件router-link和router-view
    //创建router-link组件
    Vue.component('router-link', {
        props: {
            to: {
                type: String | Object,
                required: true
            }
        },
        render(h) {// h 有三个参数，第一个参数创建的元素，第二个参数元素具有的属性, 第三个参数元素的内容
            return h('a', { attrs: { href: '#' + this.to } }, this.$slots.default)
        }
    })
    //创建router-view组件
    Vue.component('router-view', {
        // 组件要重新渲染，必须要让数据发生改变的时候，重新去执行render函数
        render(h) {
            const router = this.$router
            console.log(router.routesMap, 'routesMap');
            let component = router.routesMap[router.current];//组件
            console.log(component, 'component');
            //获取到外部传递的路由表
            return h(component)
        }
    })
}
export default VueRouter;

let Vue;
class VueRouter {
    constructor(options) {
        //保存选项
        this.options = options;
        // console.log(options, '路由数据');
        // 定义一个响应式的变量current，保存当前的hash值
        let url = location.hash.slice(1,) || '/';
        // defineReactive定义响应式的对象
        Vue.util.defineReactive(this, 'current', url)
        //判断当前的路由模式
        if (this.options.mode === 'hash') {
            // hashchange事件来监听hash值的变化, 注意this指向问题
            addEventListener('hashchange', this.changeHash.bind(this))
        } else if (this.options.mode === 'history') {
            // history模式监听的事件叫做：popstate, 监听的是浏览器左上角的两个小箭头的变化
            addEventListener('popstate', this.changeHistory.bind(this))
        }
        this.routesMap = {};
        //对routes中的对象做一个映射：routesMap = {'/home':component,'/list': component}
        this.options.routes.forEach(route => {
            this.routesMap[route.path] = route.component
        })
    }
    //监听hash值变化的函数
    changeHash() {
        //通过location.hash来获取到hash值
        this.current = location.hash.slice(1,)
        console.log(this.routesMap, '555');
        // console.log(this.current);//当前path路径
    }
    // history
    changeHistory() {
        // console.log(location.pathname)
        this.current = location.pathname;
    }
}

 VueRouter.install = function (_Vue) {
    //1、保存Vue
    Vue = _Vue
    //2、将以下代码延迟到vue实例初始化完毕执行
    Vue.mixin({
        beforeCreate() {
            //判断如果有router属性就执行下方代码
            if (this.$options.router) {
                Vue.prototype.$router = this.$options.router;
            }
        }
    })
    //创建全局组件router-link和router-view
    //创建router-link组件
    Vue.component('router-link', {
        props: {
            to: {
                type: String | Object,
                required: true
            }
        },
        render(h) {// h 有三个参数，第一个参数创建的元素，第二个参数元素具有的属性, 第三个参数元素的内容
            const router = this.$router;
            if (router.options.mode === 'hash') {
                return h('a', { attrs: { href: '#' + this.to } }, this.$slots.default)
            } else if (router.options.mode === 'history') {
                return h('a', {
                    attrs: { href: this.to },
                    on: {
                        'click': ev => {
                            // 1. 阻止a链接的默认跳转行为
                            ev.preventDefault()
                            // 2. 调用pushState方法来实现跳转： pushState(obj, title, url)
                            history.pushState({}, '', this.to)
                            // 3. 设置current的值
                            router.current = this.to;
                        }
                    }
                }, this.$slots.default)
            }
        }
    })
    //创建router-view组件
    Vue.component('router-view', {
        // 组件要重新渲染，必须要让数据发生改变的时候，重新去执行render函数
        render(h) {
            const router = this.$router
            console.log(router.routesMap, 'routesMap');
            let component = router.routesMap[router.current];//组件
            console.log(component, 'component');
            //获取到外部传递的路由表
            return h(component)
        }
    })
}