实现一个vue-router插件

更新日期: 2019-08-18阅读: 2.1k标签: 插件

一、回顾一下官方vue-router插件的使用

要想自己实现一个vue-router插件,就必须先了解一下vue-router插件的基本使用,我们在使用vue-router的时候,通常会定义一个router.js文件,里面主要就是干了以下几件事:

① 引入vue-router模块

import Router from 'vue-router'

② 引入Vue并使用vue-router,即所谓的安装vue-router插件

import Vue from 'vue'
Vue.use(Router)

③ 创建路由对象并对外暴露
④ 配置路由对象,即在创建路由对象的时候传递一个options参数,里面主要包括mode(路由模式)、routes(路由表)

export default new Router({
    mode: 'history',
    routes: [
        {
          path: '/',
          name: 'home',
          component: Home
        },
        {
          path: '/about',
          name: 'about',
          component: About
        }
    ]
});
当然,还有最后一步就是在main.js中引入router.js对外暴露的路由对象,并且将该路由对象配置到Vue项目的根实例上,至此,就可以在项目中使用vue-router了,所谓使用路由,就是在页面中使用<router-link>和<router-view>组件来实现路由的跳转和跳转内容的显示。而<router-link>和<router-view>组件这两个组件是vue-router提供的只有经过安装路由之后,才能识别这两个组件,否则会报错,提示Unknown custom element: <router-link> - did you register the component correctly?,因为vue-router内部会通过Vue.component()方法进行全局注册这两个组件。


二、理解路由的两种模式

路由有两种模式,一种是hash路由,即以#号加路径名的方式,将路由添加到浏览器url地址末尾;另一种就是history路由,就是通过浏览器提供的history api实现路由的跳转,可以实现直接将路由路径追加到浏览器域名末尾。并且这两种方式,都是路径变化,即浏览器url地址变化,但是页面不会跟着刷新,所以vue-router中要做的事,就是监听浏览器路径即路由的变化,然后动态渲染对应的路由组件,可以通过双向绑定机制实现,后面会具体讲。我们先来简单了解一下这两种路由的使用方式

① hash路由
// index.html

<a href="#/home">Home</a>
<a href="#/about">About</a>
<div id="content"></div> <!--显示路由内容区域-->
当用户点击上面的这两个链接,就会在浏览器url地址末尾追加上"#/home"或者"#/about",但此时页面并没有刷新,所以我们要监听hash路由的变化,浏览器提供了一个hashchange事件,我们可以通过该事件实现路由显示区内容的变化
window.addEventListener("hashchange", () => {
   content.innerHTML = location.hash.slice(1); // 监听到hash值变化后更新路由显示区内容
});

② history路由

history路由,要实现路由地址的变化,那么需要用到history提供的pushState(state, title, path)方法,从该方法名可以知道,第一个参数为state对象,可以为null;第二个参数为title字符串,即路由title,暂时无具体作用,后续可能会有用,可以为null;第三个参数才是有用的,即路由要跳转的路径字符串,虽然前两个参数都可以为null,但是我们为了给State进行标识,可以传递一个state对象,对象中包含title和path属性分别表示路由的名称和要跳转的路径,这样就可以通过history.state知道当前路由的状态信息,是哪个路由了。

// index.html

<a onclick="go('/home')">Home</a>
<a onclick="go('/about')">About</a>
<div id="content"></div>
这里没有直接使用href="/home",因为路由的变化要通过pushState()实现,路由变化的时候才能监听到popstate事件,所以这里监听了click事件通过pushState()的方式去更改路由地址
function go(path) {
   history.pushState({title:path.slice(1), path}, path.slice(1), path);
   content.innerHTML = path;
}
window.addEventListener("popstate", () => { // 监听到路由变化后再次调go()方法更新路由显示区内容
   go(location.pathname);
});


三、开始实现自己的vue-router路由插件

① 在路由插件中声明一个VueRouter类,因为我们使用vue-router的时候,是先引入路由插件,然后通过路由插件去new出一个router对象,所以引入的路由插件是一个类,同时在创建router对象的时候需要传递一个options参数配置对象,有moderoutes等属性配置,如:
// vue-router.js

class VueRouter { // VueRouter实际上是一个function,也可以看做是一个对象
    constructor(options) {
        this.mode = options.mode || '';
        this.routes = options.routes || [];
    }
    static install(Vue) { // 添加一个静态的install方法,该方法执行的时候会传入Vue构造函数
        // 这里主要是给所有Vue实例添加一些属性等操作
    }
}
export default VueRouter;
上面在VueRouter类中添加了一个静态的install方法,之所以是静态的,是因为我们使用路由插件的时候传递给Vue.use()方法的参数是导出的这个VueRouter类,而use方法执行的时候会调用传递给其参数的install方法,即调用VueRouter.install(),所以install是静态方法,所以如果路由插件导出的是一个对象,那么这个对象上也必须要有一个install()方法
// 以下导出插件对象的方式也可以,比如,vuex就是导出的插件对象
class VueRouter {}
const install = () => {}
export default { // 导出插件对象
    VueRouter,
    install // 导出的插件对象中必须要有一个install方法
}

// 使用的时候也要进行相应的变化,如:

import rt from "./vue-router"
Vue.use(rt);
const router = new rt.VueRouter({});

② 创建路由表对象,我们要根据路径的变化动态渲染出相应的组件,所以为了方便,我们需要构造一个路由表对象,其属性为路径属性值为组件,这样当路径发生变化的时候,我们可以直接通过路由表对象获取到对应的组件并渲染出来

this.routesMap = this.createMap(this.routes); // 给VueRouter类添加一个routesMap属性,用于保存构建的路由表对象
createMap(routes) { // 通过传递进来的routes构建路由表对象
    return routes.reduce((result, current) => {
        result[current.path] = current.component;
        return result;
    }, {});
}
这里构造路由表对象使用到了reduce方法,reduce方法是一个用于实现累加操作的方法,array.reduce(function(total, currentValue, currentIndex, arr), initialValue),当传入了initialValue,那么total就会等于initialValue的值,currentValue就是数组的第一个元素,接着下一轮循环,会把函数的返回值当做total传入,数组的第二个元素当做currentValue传入,一直循环直到数组元素遍历完毕。

③ 保存当前路由,我们可以创建一个对象用于专门保存当前路由信息,我们只需要去更改当前路由信息,就可以动态渲染出相应的路由视图了,如:

class CurrentRoute { // 创建一个类,专门用于保存当前路由信息,同时方便在当前路由对象上添加属性和方法
    constructor() {
        this.path = null; // 添加一个path属性保存当前路由的路径
    }
}
this.currentRoute = new CurrentRoute();// 给VueRouter添加一个currentRoute属性,保存当前路由信息对象

④ 执行init()方法进行路由初始化,就是根据当前url地址进行判断,如果页面一加载什么路径都没有,那么就跳转到"/"首页,如果路径变化则保存当前路由信息,如:

init() { // 初始化路由信息
        if (this.mode === "hash") { // 如果是hash路由
            if (location.hash) { // 如果页面一加载的时候就有hash值
                this.currentRoute.path = location.hash.slice(1); // 保存当前路由的路径
            } else { // 如果页面一加载的时候没有hash值
                location.hash = "/"; // 跳转到首页"/",即在url地址末尾添加"#/"
            }
            window.addEventListener("hashchange", () => { // 监听浏览器地址栏hash值变化
                this.currentRoute.path = location.hash.slice(1); // hash改变,同样更新当前路由信息
            });
        } else { // 如果是history路由
            if (location.pathname) { // 如果页面一加载的时候就有pathname值
                this.currentRoute.path = location.pathname; // 保存当前路由的路径
            } else { // 如果页面一加载的时候没有pathname值
                location.pathname = "/"; // 跳转到首页"/",即在域名地址末尾添加"/"
            }
            window.addEventListener("popstate", () => { // 监听点击浏览器前进或后退按钮事件
                this.currentRoute.path = location.pathname; 
            });
        }
    }
需要注意的是,history.pushState()方法不会触发popstate事件只有点击浏览器前进或后退按钮才会触发popstate事件,但是只要浏览器地址栏hash值变化就会触发hashchange事件

⑤ 在每个Vue实例上都添加上$router和$route属性

我们在使用vue-router的时候,每个实例上都可以通过this.$router和this.$route获取到对应的路由对象和当前路由对象,所以我们需要使用Vue的mixin()方法在每个实例上混入$router和$route,我们在第①步的时候还遗留了install()方法的具体实现,我们可以在执行install()方法的时候混入一个beforeCreate钩子函数,mixin混入的方法如果和vue实例上的方法同名并不会覆盖,而是将同名的方法放到一个数组中,并且mixin中混入的方法在数组的最前面,即mixin中混入的方法先执行,这样每个实例创建的时候都会执行该beforeCreate(),那么我们可以在这里将$router和$route混入到每个实例上,如:
static install(Vue) { // install方法执行的时候会传入Vue构造函数
        Vue.mixin({ // 调用Vue的mixin方法在每个Vue实例上添加一个beforeCreated钩子
            beforeCreate () {
                if (this.$options && this.$options.router) { // 如果是根组件,那么其options上就会有router属性
                    this._router = this.$options.router;
                } else { // 非根组件
                    this._router = this.$parent && this.$parent._router; // 从其父组件上获取router
                }
                Object.defineProperty(this, "$router", { // 给每个Vue实例添加$router属性
                    get() { // 返回VueRouter实例对象
                        return this._router;
                    }
                });
                Object.defineProperty(this, "$route", { // 给每个Vue实例添加$route属性
                    get() {
                        return { // 返回一个包含当前路由信息的对象
                            path: this._router.currentRoute.path
                        }
                    }
                });
            }
        });
    }
在使用路由插件的时候,会在根实例上注入一个router属性,所以如果this.$options有router的就是根实例,即main.js中创建的那个Vue实例,由于Vue组件的创建顺序是由外到内的,也就是说根组件-->子组件 --> 孙组件 -->...,所以渲染的时候可以依次从其父组件上获取到父组件上保存的_router实例,从而保存到当前组件的_router上。

⑥ 注册router-link和router-view组件

我们需要在install()方法执行的同时,通过Vue在全局上注册router-link和router-view这两个组件,可以使用Vue.component()方法全局注册。
static install(Vue) {
    Vue.component("router-link", { // 全局注册router-link组件
        props: {
            to: {
                type: String,
                default: "/"
            }
        },
        methods: {
          handleClick(e) {
              if (this._router.mode === "history") { // 如果是history路由
                  history.pushState({}, null, this.to); //通过pushState()方法更新浏览器地址栏路径,不会刷新页面
                  this._router.currentRoute.path = this.to; // 点击链接后更新当前路由路径
                  e.preventDefault(); // 阻止<a>标签的默认行为,防y页面默认跳刷新s页面
              }
          }  
        },
        render() {
            const mode = this._router.mode; // 当前<router-link>组件上也会注入_router属性从而可以获取到路由的mode
            return <a on-click={this.handleClick} href={mode === "hash" ? `#${this.to}` : this.to}>{this.$slots.default}</a>;
        }
    });
    Vue.component("router-view", { // 全局注册router-view组件
        render(h) {
            const currentPath = this._router.currentRoute.path;
            const routesMap = this._router.routesMap;
            return h(routesMap[currentPath]); // 根据路由表传入当前路由路径,获取对应的组件,并渲染
        }
    });
}
上面给<a>标签添加了一个click事件,因为当使用history路由的时候,<a>标签上的href是一个路径,点击后会进行默认跳转到该路径,从而会刷新页面,所以需要阻止其默认跳转行为,并通过history的api进行跳转

⑦ 添加响应式路由

这里目前有一个问题,就是现在点击<router-link>的链接,仅仅是浏览器地址栏url地址发生了变化,我们也可以看到点击链接后,我们在handleClick事件函数中确实更新了当前路由的path,但是<router-view>中的内容并没有跟着变化,因为这个当前路由currentRoute对象里面的数据并不是响应式的,所以当前路由变化,视图并不会跟着变化,要想让currentRoute对象中的数据变成响应式的,那么我们可以通过Vue.util提供的一个definereactive()方法,其可以给某个对象添加某个属性,并且其属性值是响应式的,如:
static install(Vue) { // 在install方法中添加响应式路由,因为install方法会传入Vue
    // 将当前路由对象定义为响应式数据
    Vue.util.defineReactive(this, "current", this._router.currentRoute);
}
这样,this._router.currentRoute这个当前路由对象中的数据就变成响应式的了,<route-view>组件的render()函数中使用到了this._router.currentRoute,所以其render()函数就会再次执行从而动态渲染出当前路由


四、总结

至此,已经实现了一个简单的vue-router插件,其核心就是,监听路由路径变化,然后动态渲染出对应的组件,其完整代码如下:
class CurrentRoute {
    constructor() {
        this.path = null;
    }
}
class VueRouter { // VueRouter实际上是一个function,也可以看做是一个对象
    constructor(options) {
        this.mode = options.mode || '';
        this.routes = options.routes || [];
        this.routesMap = this.createMap(this.routes);
        this.currentRoute = new CurrentRoute();
        this.init();
    }
    init() {
        if (this.mode === "hash") { // 如果是hash路由
            if (location.hash) { // 如果页面一加载的时候就有hash值
                this.currentRoute.path = location.hash.slice(1); // 保存当前路由的路径
            } else { // 如果页面一加载的时候没有hash值
                location.hash = "/"; // 跳转到首页"/",即在url地址末尾添加"#/"
            }
            window.addEventListener("hashchange", () => { //监听浏览器地址栏hash值变化
                this.currentRoute.path = location.hash.slice(1); // hash改变,同样更新当前路由信息
            });
        } else { // 如果是history路由
            if (location.pathname) { // 如果页面一加载的时候就有pathname值
                this.currentRoute.path = location.pathname; // 保存当前路由的路径
            } else { // 如果页面一加载的时候没有pathname值
                location.pathname = "/"; // 跳转到首页"/",即在域名地址末尾添加"/"
            }
            window.addEventListener("popstate", () => { // 监听点击浏览器前进或后退按钮事件 
                this.currentRoute.path = location.pathname; // 如果页面一加载就带有pathname,那么就将路径保存到当前路由中
            });
        }
    }
    createMap(routes) {
        return routes.reduce((result, current) => {
            result[current.path] = current.component;
            return result;
        }, {});
    }
    // Vue的use方法会调用插件的install方法,也就是说,如果导出的插件是一个类,那么install就是类的静态方法
    // 如果导出的是一个对象,那么install就是该对象的实例方法
    static install(Vue) { // install方法执行的时候会传入Vue构造函数
        Vue.mixin({ // 调用Vue的mixin方法在每个Vue实例上添加一个beforeCreated钩子
            beforeCreate () {
                if (this.$options && this.$options.router) { // 如果是根组件,那么其options上就会有router属性
                    this._router = this.$options.router;
                } else { // 非根组件
                    this._router = this.$parent && this.$parent._router; // 从其父组件上获取router
                }
                // 将当前路由对象定义为响应式数据
                Vue.util.defineReactive(this, "current", this._router.currentRoute);
                Object.defineProperty(this, "$router", {
                    get() { // 返回VueRouter实例对象
                        return this._router;
                    }
                });
                Object.defineProperty(this, "$route", {
                    get() {
                        return { // 返回一个包含当前路由信息的对象
                            path: this._router.currentRoute.path
                        }
                    }
                });
            }
        });
        Vue.component("router-link", {
            props: {
                to: {
                    type: String,
                    default: "/"
                }
            },
            methods: {
              handleClick(e) {
                  if (this._router.mode === "history") { // 如果是history路由
                      history.pushState({}, null, this.to); //通过pushState()方法更路径,不会刷新页面
                      this._router.currentRoute.path = this.to; // 更新路径
                      e.preventDefault(); // 阻止<a>标签的默认行为,防y页面默认跳刷新s页面
                  }
              }  
            },
            render() {
                const mode = this._router.mode; // 当前<router-link>组件上也会注入_router属性从而可以获取到路由的mode
                return <a on-click={this.handleClick} href={mode === "hash" ? `#${this.to}` : this.to}>{this.$slots.default}</a>;
            }
        });
        Vue.component("router-view", {
            render(h) {
                const currentPath = this._router.currentRoute.path;
                // const currentPath = this.current.path;
                const routesMap = this._router.routesMap;
                return h(routesMap[currentPath]);
            }
        });
    }
}
export default VueRouter;

链接: https://fly63.com/article/detial/5008

对于前端开发,整理推荐好用的chrome插件或应用

向web前端开发者整理提供的chrome插件或应用:比如Postman、JSON Viewer、Page Ruler 、ChromeADB 等等

使用原生js开发插件的实现方法

作为前端开发,我们都习惯使用一些开源的插件例如jquery工具库,那么如何使用原生js来开发封装一个自己的插件呢?接下来就看一下怎么去开发一个自己的js插件,先上代码

typeahead.js_jquery input 搜索自动补全jQuery插件

jquery.typeahead.js是一款高级的自动补全jQuery插件。该自动补全插件提供超过50个配置选项和回调方法,用于完成自动补全功能,能够完成绝大部分表单自动补全的需求。

js轮播插件_轮播图js代码插件总汇

这篇文章为大家分享图片轮播插件,最全最简单最通用的 幻灯片轮播插件,pc端和移动端都可完美使用,能满足绝大部分网站的轮播需求。js轮播插件包括Swiper、slick、owl carousel2、jssor/slider 、iSlider 等

ios风格的时间选择插件

在上个项目中,客户希望时间选择插件可以是ios风格的那种,但是找了很久,发现并没有用vue的ios风格时间插件,于是自己便自己造了一个轮子.插件依赖于better-scroll和vue

前端最常用的vscode插件集

在前端开发中,使用Visual Studio Code有哪些你常用的插件?推荐几个自己喜欢的,不带链接,自己搜索安装吧。这些都是比较实用、前端必备的插件集

浏览器插件_常用谷歌浏览器插件推荐

常用谷谷歌浏览器确实没有其它国产软件的内置功能丰富。但是 Google 浏览器的的优点恰恰就体现在拥有超简约的界面,以及支持众多强大好用的扩展程序,用户能够按照自己的喜好去个性化定制浏览器。今天我就给大家介绍几款自己常用的插件。

sublime安装插件

安装Sublime text 2插件很方便,可以直接下载安装包解压缩到Packages目录,也可以安装package control组件,然后直接在线安装

BlockUI详细用法_Jquery中ajax加载提示插件blickUI

BlockUI 插件是用于进行AJAX操作时模拟同步传输时锁定浏览器操作。当它被激活时,它会阻止使用者与页面(或页面的一部分)进行交互,直至它被取消。BlockUI以在DOM中添加元素的方法来实现阻止用户与浏览器交互的外观和行为

vue项目中vscode格式化配置和eslint配置冲突

使用vscode开发vue项目的时候,从远端拉下一个新的项目后,安装完依赖后跑起项目时,发现直接报了一堆语法错误:包括换行、空格、单双引号、分号等各种格式问题

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!