vue-router

basis

Vue-router is familiar to everyone. It is one of the core ecosystems in VUE.

  • There are two modes: Hash and history

  • Two components, router-link and router-View

  • Two common method attributes are this.$router and this.$routes

    • this.$routerRoute redirection.
    • this.$routesObtain the route transmission parameter.

  • Three navigation hooks.

    • Global navigation hooks.
    • Route exclusive navigation hooks.
    • Component navigation hooks.

Navigation hook implementation is too complex, if you want to explore vue-Router real source code, you can refer toJuejin. Cn/post / 684490…

Simple and easy to implement

The core

The Hash mode relies primarily on listening for the hashchange method.

Register components with Vue.Com Ponent

Use vue.util.definereActive to make the router responsive and update the view as soon as the path is updated

Based on the code

const HASH='hash',HISTORY='history';
class History{
    constructor(current){
        this.current=current||'/home'; }} class VueRouter {constructor (options) {/ / mode. This mode = options. The mode | | HASH.letroutes=options.routes || []; this.routesMap=this.handleRoutes(routes); this.history=new History(); this._init(); } /** * initializes */_init() {if(this.mode===HASH)
        {
            location.hash?' ':location.hash='# /';
            //hash chanage
            window.addEventListener('hashchange',()=>{
             
                this.history.current=location.hash.slice(1);
                  
            })
            window.addEventListener('load',()=>{ this.history.current=location.hash.slice(1); })}else if(this.mode===HISTORY)
        {
            location.pathname?' ':location.pathname='/'
              window.addEventListener('popstate',()=>{
                 
                this.history.current=location.pathname;

                  
            })
            window.addEventListener('load',()=>{
                this.history.current=location.pathname;

            })

        }

    }

    handleRoutes(routes){

        var routesMap=routes.reduce((res,current)=>{
         
                res[current.path]=current.component;
                returnres; }, {}); console.log(routesMap);returnroutesMap; }} / * * * * @ installation param {*} Vue * / VueRouter. Install = (Vue) = > {Vue. Mixin ({beforeCreate(){// get a unique router instance // and componentsif(this.$options && this.$options.router)
                {
                    this._root=this.$options.router ||{}; // Add _route to listener, when history.current is modified, update vue.util.definereactive (this,'_route', this._root.history)
                }
                else{// child component this._root=this.$parent && this.$parent._root||{};
                }
                console.log(this._root);
                Object.defineProperty(this,'$routes', {get() {return this._self._root
                    }

                })
                Object.defineProperty(this,'$router', {get() {returnthis._self._root.history.current; }})}}) // Vue.component('router-link',{
          props:{
                to:String,
                required:true
          },
          render(h)
          {
               let mode=this._self._root.mode,to=this.to;
          return<a href={mode===HASH? `#${to}`:to}>{this.$slots.default}</a>}}) // Register routing container component Vue.component('router-view',{
        render(h)
        {
            console.log(this._self)
            let current=this._self._root.history.current;
        
            if(! current) {return;
            }
            
            let component=this._self._root.routesMap[current];
             return h(component)
        }
   })



}
export default VueRouter;
Copy the code

conclusion

Here is only a simple simulation of vue-Router, far from the real source code, and no practical significance, but simple implementation can let us know more about its implementation principle. The above is my understanding in learning, if there is any mistake, please understand, welcome criticism and correction.