Hash and History modes
Hash mode
http://localhost.com/#/user/id
The Hash pattern is based on anchor points and onhashchange events.
- Change the browser address through window.location.href. If you only change # the following address, the server request will not be triggered, and the # value will be used as the routing address
- When the address changes, the onhashchange event is triggered. Listen for the event and handle it accordingly
- Toggle display of different components
History mode
http://localhost.com/user/id
The History pattern is based on the History API in HTML5
Changing the browser address through the history.pushState() method will only change the browser address without sending a request to the server, and record the current address in the browser's history
- history.pushState(): no request will be sent to the server. pushState will add a new record to the history stack
- history.replaceState(): no request will be sent to the server. replaceState will not add a new history stack record, but replace the current url
- Listen to the pop state event to listen for changes in the browser's historical data. Events are not triggered in pushstage or replacestage, but only when the browser advances or retreats
- Find the corresponding component according to the current routing address and re render
nginx environment configuration
location / { root html; index index.html index.htm; #Add new content #Try to read $uri (the path of the current request). If you can't read the first page under $uri / this folder #If you can't get the index.html try in the root directory_ files $uri $uri/ /index.html; }
Simulation Implementation
Create a vueroter plug-in and use the static method install
- Determine whether the plug-in has been loaded
- When Vue is loaded, mount the incoming router object on the Vue real column (the purpose of global mixing is to get the Vue real column)
Create vueroter class
- Initialization, options, routeMap, data (path, create Vue instance as the current path of responsive data record)
- createRouteMap() traverses all routing information and records the mapping of components and routes in the routeMap object
- initComponent() creates router link and router view components
- initEvent() registers the pop state event and re records the current path when the routing address changes
- When the path changes, find the corresponding component in the routerMap object through the current path and render the router view
let _Vue = null; export default class VueRouter { constructor(options) { this.options = options; this.routeMap = {}; this.data = _Vue.observable({ current: "/", }); this.createRouteMap(); this.initComponent(_Vue); this.initEvent(); } static install(Vue) { //1 determine whether the current plug-in is installed if (VueRouter.install.installed) { return; } VueRouter.install.installed = true; //2 record the constructor of Vue in the global _Vue = Vue; //3. Inject the router object passed in to create the Vue instance into the Vue instance // _Vue.prototype.$router = this.$options.router _Vue.mixin({ beforeCreate() { if (this.$options.router) { _Vue.prototype.$router = this.$options.router; } }, }); } // Traverse all routing rules. The routing rules are parsed into key value pairs and stored in routeMap createRouteMap() { this.options.routes.forEach((route) => { this.routeMap[route.path] = route.component; }); } // Create router link and router view components initComponent(Vue) { Vue.component("router-link", { props: { to: String, }, render(h) { return h( "a", { attrs: { href: this.to, }, on: { click: this.clickHandler, }, }, [this.$slots.default] ); }, methods: { clickHandler(e) { // Change the address, do not send a request, and record the address history history.pushState({}, "", this.to); this.$router.data.current = this.to; // Block subsequent execution and prevent hyperlinks from jumping e.preventDefault(); }, }, // template:"<a :href='to'><slot></slot><>" }); const self = this; Vue.component("router-view", { render(h) { const cm = self.routeMap[self.data.current]; return h(cm); }, }); } // Register the pop state event. When the routing address changes, re record the current path initEvent() { window.addEventListener("popstate", () => { this.data.current = window.location.pathname; }); } }