M站单页面开发——hash路由的简单封装

使用路由的好处

不用刷新页面，用户体验好......

hash 路由的封装

1. 路由的使用

   既然要封装，必须先知道要封装什么东西，所以要根据使用的方法来封装功能

   const router = new Router({
       // 路由的选择，本篇只封装hash路由
       mode: 'hash',
       // 路由表的配置
       routes: [
           {
               path: '/',
               template: home
           },
           {
               path: '/list',
               template: list
           }
       ]
   })
   
   window.router = router;
   

2. hash路由的实现

   class Router {
       constructor(options) {
   
           //路由配置项/参数
           this.$options = options;
   
           //路由的形式  当用户传递了路由的形式就用用户传递过来的  如果没有则默认是hash
           this.$mode = this.$options.mode || 'hash';
   
           // 路由表
           this.$routes = this.$options.routes || [];
   
           // 定义初始的hash值
           this.current = '/';
   
           // 路由表对象
           this.mapRoutes = {};
   
           // 定义路由传值的对象(?之后的参数)
           this.$route = {
               query: {},
               path: '/'
           }
   
           this.init();
       }
   
       init() {
           // 0、定义hash路由
           window.location.href = window.location.origin + '#/';
           // 1、处理路由表对象
           this.mapRoutesHandler();
           // 2、监听路由变化的事件
           this.bindEvent();
           // 3、渲染对应的页面
           this.render();
       }
   
       // 处理参数中的路由表
       mapRoutesHandler() {
           this.$routes.forEach(item => {
               this.mapRoutes[item.path] = item;
           });
       }
   
       // 监听路由变化的事件
       bindEvent() {
           window.addEventListener("load", this.hashchangeHandler.bind(this))
           window.addEventListener("hashchange", this.hashchangeHandler.bind(this));
       }
   
       // 路由变化的回调
       hashchangeHandler() {
           // 获取hash值
           let hash = window.location.hash.split('?')[0].slice(1) || "/";
           this.current = hash;
           // 获取query传值
           this.getQuery();
           // 渲染页面
           this.render();
       }
   
       // 渲染页面
       render() {
           let template = this.mapRoutes[this.current].template;
           template.render();
       }
   
       // 获取地址?后的参数并转化为对象
       getQuery() {
           let href = window.location.href;
           let obj = href.substr(href.indexOf("?") + 1).split("&").reduce((prev, item) => {
               let key = item.split("=")[0];
               let val = item.split("=")[1];
               prev[key] = val;
               return prev;
           }, {})
           this.$route.query = obj;
       }
   
       // 路由跳转方法
       push(path) {
           window.location.hash = path;
       }
   }