vue中router路由的原理？两种路由模式如何实现？(vue2) -(上)

最新推荐文章于 2023-10-20 17:25:43 发布

闽南,

最新推荐文章于 2023-10-20 17:25:43 发布

阅读量3.2k

点赞数

分类专栏： vue面试题文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/A_lose/article/details/132236182

版权

vue面试题专栏收录该内容

5 篇文章 0 订阅

订阅专栏

平时我们编写路由时，通常直接下载插件使用，在main.js文件中引入直接通过引入vue-router中的Router通过Vue.use使用以后定义一个routeMap数组，里边是我们编写路由的地方，最后通过实例化一个 Router实例将routes=我们定义的routeMao路由数组。

但是我们并不知道它是如何实现的，因此我们可以通过自己编写插件的形式，实现一个vue-router

常用路由步骤：

//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')

我们来实现一下如何实现一个hash模式的路由

由于我们不适用插件形式实现，因此我们使用步骤与平常实现有一些差异。

router/index.js是我们的路由文件，里面放置我们的路由

plugin/router.js是我们的自定义插件文件，里面放置我们自定义插件内容

components是我们组件目录，放置我们的路由组件(通常使用view定义路由组件)

main.js是我们的入口文件，需要在该文件引入router并且实例化vue的时候需要将引入的router使用

1、首先我们在App.vue文件中，通过<router-view/>以及<router-link/>定义声明式导航和路由占位

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

这里我们会发现使用以后会报错，因为我们没有下载插件，因此没有这两个组件。

我们需要配置plugin插件

由于没有这两个全局组件因此我们需要配置两个全局组件

install方法是为了将我们的路由挂载在我们的组件实例上，通过mixin全局混入，将我们的实例上挂载$router属性

然后定义两个全局组件，router-link由于它渲染出来相当于html中的a标签，使用render方法，参数为一个createElement方法接收三个参数(第一个参数创建的元素，第二个参数元素具有的属性, 第三个参数元素的内容)

router-view由于是一个路由占位符，因此返回的是个组件，渲染组件。

通过routesMap是我们存放的路由，current是我们的当前的path路由，因此可以通过查找路由中key值为我们当前path路径的，查找到我们的组件。通过return渲染我们的组件

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

2、我们定义一个路由类，该类会获取到我们的路由信息从而进行路由监听以及组件渲染。

(1)、该类中constructor是我们通过实例化vueRouter传入的数据,我们需要通过将数据保存在vueRouter实例上，获取到当前的url path路径。

(2)、通过监听方法hashchange监听我们hash值的变化，通过方法进行监听，但是一定要注意这里方法的this指向必须是vueRouter实例不可以是window,因此需要通过bind改变this指向

(3)、通过defineReactive来讲我们的path路径变为响应式，这样每次路径发生变化可以监测到变化。

(4)、定义routesMap为我们的路由对象，遍历我们传入的路由数组，将我们每个path路径对应组件，为一组一组的键值对。

这样可以实现一套hash路由模式的路由跳转。

全部代码如下：

//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;

接下来实现历史路由模式

我们知道历史路由模式和hash路由模式区别是域名是否存在#因此我们可以通过在路由文件中定义mode属性判断是历史路由模式还是hash路由模式。

先大白话来说一下大概的实现思路(hash和history实现区别)：

1、我们通过我们定义的mode判断是hash路由模式还是history路由模式，router-link点击跳转的时候如果是hash路由模式，我们通过render方法返回我们渲染到浏览器域名的数据，hash模式是带#的，因此我们定义href属性需要+#，但是history模式是不带#的，因此我们不需要加#。其次，因为hash模式自动检测我们的域名，因此我们实现历史模式需要手动加一个点击事件，并且需要阻止a链接默认跳转的行为(preventDefault取消默认行为)，并且通过pushState方法，实现跳转，这是历史路由模式的方法pushState(obj,title,url),最后设置我们的路由当前path路径为我们跳转的路径。

2、当我们定义好它的router-link全局组件以后，这时我们hash路由模式和history路由模式已经可以基本实现，hash模式带#，history路由模式不带#。但是我们仍要定义一个监听历史路由模式变化的监听事件。这里我们通过mode判断是什么模式从而监听不同的事件，历史路由模式监听需要通过监听popState方法，来判断是否发生变化，它坚挺的是我们浏览器的前进后退的变化。

历史路由模式监听事件为hashchange方法，这个事件是用来监听我们hash值的变化，通过设置两个方法从而设置我们当前路径为对应的path路径。hash模式会通过slice剪切到#，历史路由模式则通过location.pathname获取到当前path路径。

实现如下：

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

这一期我们讲解了，如何实现一个基本的hash路由模式以及history路由模式,但是我们通常使用情况下路由嵌套通过一级路由下定义children属性来定义二级路由，这并没有实现，下一期来实现路由嵌套。