1. vue-router

class Vrouter { /** * options: ** **/ constructor(options){this.$options = options this.routeMap = {} this.app = new Vue({data: { current : '#/'}}) this.init() this.createrOutemap (this.$options) this.initComponent(Vue)} // Initialize hashchange init(){// here when initialization Listen for hash values window.addeventListener ('load', This.onhashchange.bing (this),false) // Here to listen for hash changes window.adDeventListener ('hashchange', This. OnHashChange. Bind (this), false) / / the history mode window. AddHistoryListener (' history ', function () { Console. log(' Window history changed '); }) window. AddHistoryListener (' history ', function () {the console. The log (' window history changed - I also heard a '); })} /** * Match the path to the component from the routing information table * e.g. '/home' : Home * */ createRouteMap(options){ options.routes.forEach(item => { this.routeMap[item.path] = item.component }) } // InitComponent (Vue){vue.component_props: {to: String}, render: props: {to: String} function(h){ return h( 'a', { attrs: { href: this.to } }, This.$slot.default)}}) const _this = this Vue.component('router-view',{// here to get the location of the component rendering to the router-view placeholder Render (h) {var component = _this.routemap [_this.app.current] return h(component)}})} // Get the current hsah getHash(){return Window. The location. The hash. Slice (1) | | '/' / / interception hash} / / set the current path onHashChange () {. This app. Current = this. GetHash ()}}Copy the code

2.vueX

class Vstore { constructor(options){ this.state = options.state this.mutations = options.mutations this.actions = Options. actions // New vue ({data: {state: this.state } }) } commit(type,paylod){ const mutation = this.mutations[type] mutation(this.state,paylod) } dispatch(type, paylod){ const action = this.actions[type] const ctx = { commit: this.commit.bind(this), state: this.state } return action(ctx.paylod) } }Copy the code

Learn more knowledge please pay attention to “programmer male house”!!