简单实现一个vue-router

前端  /  管理员 发布于 6年前   254

vue-route 是什么

vue Router 是 Vue.js 官方的路由管理器。在早期的时候html模板存在服务端，然后根据浏览器输入不同的路径，服务端会根据不同的路径渲染不同的模板出来，这样的痛点就是用户每次操作的时候都要重新刷新页面，比如说很久之前的论坛，操作一下就要跳一下，交互体验很是不好，紧接着出现了Ajax异步加载，但多页面的跳转还是有些不尽人意，所以便有了spa应用，也就是前端路由，vue-route就是一个比较火的基于前端路由的原理实现的一个插件  

hash模式

hash模式主要是根据监听浏览器hash值的变化，做出对应的 动作来实现的，hash的值就是url后边#后边的那一块，用过vue的想必比较熟悉了

好， 下边我们打开控制台

//在控制台输入这句话，定义一下hashchange的回调事件window.onhashchange=()=>{         console.log(1)}

定义好这个事件之后当我们浏览器的hash值发生变化的时候控制台就会打印一个1

我们实验一下

//假设我们定义了一个路径叫routelocation.hash='/route'

讲到这里那剩下的就很简单了，hash模式的前端路由我们只需要在hash发生改变的时候给页面的根节点上渲染出我们想要的html就可以了

简单实现一个hash模式路由

首先假设我们有个div是根节点，然后他有个id叫app，我们写一个路由类让他监听hash

// 获取这个appconst  _EL  =  document.querySelector('#app');class HashRouter {    constructor(routeList) {        this.routeList = routeList;           window.addEventListener('hashchange', e => {        });    }}

然后发生改变的时候需要重新渲染页面

    //渲染方法    render(routePath) {            //获取组件        let { component } = this.list.find(el => el.path == routePath);          if ( !component )return                //渲染        _EL.innerText = component;    }

然后我们在发生改变的时候获取到当前的hash并调用渲染函数

        // 这个和onhashchange 是一样的，感觉这样写会优雅一点                window.addEventListener('hashchange', e => {            this.reSetRender();                    });                   // 渲染当前组件        reSetRender(){                    let path = location.hash.slice(1)||'/'                        this.render(path)                    }

最后实现一下hash模式路由的常用api

push(routePath) {     location.hash = routePath;     }replace(path) {         let href = window.location.href;         let url = href.split('#')[0];         location.replace(`${url}#${path}`); }go(n) {     history.go(n);}

到此hash模式的路由就算是简单的实现完毕了

//假装这里有一个路由数组配置const routeList = [XXXXXX.....]const $router = new HashRouter(routeList);

简单实现一个history模式路由

History对象是浏览器历史栈的一个接口，他里边都是和浏览器的历史栈操作有关的api

在window对象上边有一个onpopstate事件，这个事件会在历史栈发生改变的时候触发，这个事件在微信小程序的H5 里边有时候格外的有用，在微信小程序不能刷新H5，然后左上角的回退按钮，可以用这个事件进行一些操作

注意 这个onpopstate事件并不会在你手动更改history的时候触发，他只会在浏览器本身做出动作的时候才会被触发，比如pushState（），这个方法浏览器会做出反应，但是并不会触发该事件。

history模式路由代码实现和上边hash实现大同小异，不一样的地方就是在pushState和replaceState方法中需要手动调用一下渲染函数，具体代码如下

// 构造函数里边监听popstate事件window.addEventListener('popstate', e \=> {    this.handler();});// api 实现push(path) {    history.pushState(null, null, path);    this.reSetRender();}replace(path) {    history.replaceState(null, null, path);    this.reSetRender();}go(num) {    window.history.go(num);}

history模式访问的是真实的路由地址，如果没有配置的话刷新的时候会报404

so 一个简单的路由实现完毕

来自：https://segmentfault.com/a/1190000021546995