vue-router簡寫

前端路由和後端路由的區別

後端路由：
輸入url>>請求發送到服務器>>服務器解析請求的路徑>>拿到對應的頁面>>返回回去
前端路由：
輸入url>>js解析地址>>找到對應地址的頁面>>執行頁面生成的js>>看到頁面

vue-router工作流程

Hash與History

Hash
1、鏈接中帶有#，#後的就是hash的內容，改變hash不會去向後端發起請求
2、可以通過location.hash拿到hash內容
3、可以通過onhashchange監聽hash的改變
history
1、正常的路徑，修改會發起請求
2、可以通過location.pathname拿到history內容
3、可以通過onpopstate監聽history變化

vue-router

vue-router爲一個外部插件，並不是vue本身的東西
src下創建myrouter文件夾，index.js

class HistoryRoute{
    constructor(){
        //當前路徑
        this.current = null;
    }
}
class vueRouter{
    constructor(options){
        //模式，默認hash
        this.mode = options.mode || 'hash';
        this.routes = options.routes || [];
        this.history = new HistoryRoute;
        this.routesMap = this.createMap(this.routes);
        this.init();
    }
    init(){
        if(this.mode=="hash"){
            //自動加上#
            location.hash?"":location.hash="/";
            window.addEventListener("load",()=>{
                //第一次加載，監聽hash
                this.history.current = location.hash.slice(1);
            })
            window.addEventListener("hashchange",()=>{
                this.history.current = location.hash.slice(1);
            })
        }
        if(this.mode=="history"){
            window.addEventListener("load",()=>{
                //第一次加載，監聽history
                this.history.current = location.pathname;
            })
            window.addEventListener("popstate",()=>{
                this.history.current = location.pathname;
            })
        }
    }
    //routes數據格式轉換，{path:組件名}的形式
    createMap(routes){
        return routes.reduce((memo,current)=>{
            memo[current.path] = current.component;
            return memo;
        },{})
    }
}
vueRouter.install = function(vue){
    vue.mixin({//從父組件到子組件依次混入
        //在組件還沒有生成，數據沒有渲染之前混入
        beforeCreate(){
            if(this.$options&&this.$options.router){//this指向當前組件
                //第一次進來是main.js中的new Vue部分
                this._root = this;
                this._router = this.$options.router;
                //監聽current
                vue.util.defineReactive(this,'current',this._router.history);
            }else{
                //後面進來的組件，指向根實例
                this._root = this.$parent._root;
            }
            //將_root的內容綁定到$router和$route上
            //多人合作，防止數據篡改，所以只設置讀取，不許修改
            Object.defineProperty(this, '$router', {
                get() {
                    return this._root._router;
                }
            })
            Object.defineProperty(this, '$route', {
                get() {
                    return this._root._router.history.current;
                }
            })
        }
    })
    //註冊router-view全局組件
    vue.component('router-view',{
        render(h){
            let current = this._self._root._router.history.current;
            let routeMap = this._self._root._router.routesMap;
            return h(routeMap[current]);
        }
    })
}
export default vueRouter;

router文件夾中修改index.js

import Vue from 'vue'
import Router from '../myrouter'
import HelloWorld from '@/components/HelloWorld'
import Test from '@/components/Test'

Vue.use(Router)

export default new Router({
  mode: "hash",//模式
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/test',
      name: 'Test',
      component: Test
    }
  ]
})

頁面效果