Hash 与 History
Routing principles
Implement routing
/ **
* 1, the difference between the front end and the rear end routing routes
rear routes: Enter URL => = request to the server> server resolves the request path => to get the corresponding page => Back out
distal route: input url => js address parsing => page address to find the corresponding => js execute the generated page => see page
differences:
1, the front end of the route without requesting direct access parsed browser;
2, the front end of the route, there are the hash
* /
/ **
* 2, Hash and History
hash:
1, # address bar appears indicating hash, hash is behind # content;
2, you can get by location.hash;
3, can monitor the hash changed by onhashchange;
features: do not under hash mode transmission request;
history:
. 1, i.e., normal address bar history path;
2, location.pathname get the path;
3, onpopstate monitor can change history;
characteristics:
* /
/ **
* 3, the basics VUE plug
1, Vue.use (parameters) => use a plug-in;
if the argument is a method that will be executed;
but in terms of parameters for anything, as long as install property, the priority will be to perform install method;
2, ue.mixin () => vue to global attributes mixed, some common methods may be injected into the vue, can be accessed via this;
core life cycle is defined from
A var = function () {
the console.log ( 'AAA');
}
a.install = function () {
the console.log ( 'the install');
vue.mixin ({
Data: () => {
return B: // 1111 can be accessed throughout the project to the vue this property b
}
})
}
Vue.use (A); // prints out the install
* /
/ **
*. 4, source code analysis vue
1, Vue.util // represents vue tools in
a total of four:
the warn
Extend
of MergeOptions
defineReactive
vue.extend (); //
vue.util.extend (); // shallow copy
* /
/ ** 5, handwriting router widget * /
class HistoryRoute {
constructor () {
this.current = null;
}
}
//options 表示 new Routers里传入的值
class vueRouter {
constructor (options){
this.mode = options.mode || 'hash';
this.routers = options.routers || [];
this.history = new HistoryRoute;
this.routersMap = this.creatMap(this.routers);
this.init();
}
init(){
if(this.mode == 'hash'){
//自动加#
location.hash ? '' : location.hash = '/';
window.addEventListener('load',() => {
this.history.current = location.hash.slice(1);
})
window.addEventListener ( 'hashchange', () => {
this.history.current location.hash.slice = (. 1);
})
}
}
creatMap (Routers) {
return routers.reduce ((m, Current) => {
m [current.path] = current.component;
return m;
})
}
}
vueRouter.install = function (Vue) {
// write plug to be noted that if the plug has been registered is determined
iF (vueRouter.install.installed) return;
vueRouter. = to true install.installed;
Vue.mixin ({
beforeCreate () {
.. IF (this && this Options $ $ options.router) {
// this refers to the current instance vue
= the this this._root;
this._router the this $ = options.router;.
Vue.util.defineReactive (the this, 'Current', this._root.history); // third parameter as children, find a layer
} {the else
this._root the this $ = parent._root;. // If not found, look up has been found so far;
}
}
})
Vue.component ( 'Router-View', {
the render (H) {
the let Current = the this. _self._root._router.history.current;
the console.log (Current);
the let routerMap = this._self._root._router.routersMap;
return H (routerMap [Current]);
}
});
}
Export default vueRouter;