简单实现一个vue-route

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

咱们实验一下

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

效果以下图

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

简单实现一个hash模式路由

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

// 获取这个app
const  _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 一个简单的路由实现完毕，喜欢的点击赞吧