10 minutes to thoroughly understand WeChat applet single page application routing

Single page application characteristics

"Assumption:" In a web page, there is a button that can jump to other pages in the site by clicking it.

「Multi-page application:」 Click the button to reload an HTML resource and refresh the entire page;

「Single-page application:」 When you click a button, there is no new HTML request, only a partial refresh occurs, which can create a near-native experience that is as smooth as silk.

Why can SPA single-page applications be almost refresh-free? Because of its SP——single-page. When entering the application for the first time, the only HTML page and its public static resources are returned. The subsequent so-called "jumps" no longer get the HTML file from the server, but are just DOM replacement operations, which are simulated.

So how does js capture the timing of component switching and change the browser URL without refreshing? Rely on hash and HTML5History.

Hash Routing

feature

• Similar to www.xiaoming.html#bar, it is a hash route. When the hash value after # changes, no data is requested from the server. The change of URL can be monitored through the hashchange event, so as to perform DOM operations to simulate page jump.
• No server cooperation required
• Not SEO friendly

principle

hash

HTML5History Routing

feature

1. History mode is a new feature of HTML5. It is more intuitive than hash routing and looks like this: www.xiaoming.html/bar. To simulate page jump, history.pushState(state, title, url) is used to update the browser route. When the route changes, the popstate event is listened to to operate the DOM.
2. Need backend cooperation for redirection
3. Relatively friendly to SEO

principle

HTML5History

Vue-router source code interpretation

Taking Vue's router vue-router as an example, let's take a look at its source code.

Tips: Because the focus of this article is to explain the two modes of single-page routing, so only some key codes are listed below, mainly explaining:

1. Registering a plugin
2. VueRouter's constructor distinguishes routing modes
3. Registering components globally
4. Hash / HTML5History mode push and listen methods
5. transitionTo method
   

Registering a plugin

First of all, as a plug-in, you must consciously expose an install method for Vue to use.

In the install.js file of the source code, the install method for registering and installing the plug-in is defined, the method is mixed into the hook function of each component, and the route is initialized when the beforeCreate hook is executed:

Vue.mixin({
 beforeCreate () {
 if (isDef(this.$options.router)) {
 this._routerRoot = this
 this._router = this.$options.router
 this._router.init(this)
 Vue.util.defineReactive(this, '_route', this._router.history.current)
 } else {
 this._routerRoot = (this.$parent && this.$parent._routerRoot) || this
 }
 registerInstance(this, this)
 },
 // Throughout the text, ... is used to indicate omitted methods...
});

Distinguish mode

Then, we find the base class VueRouter of the entire plug-in from index.js. It is not difficult to see that it uses different routing instances in the constructor according to different modes.

...
import {install} from './install';
import {HashHistory} from './history/hash';
import {HTML5History} from './history/html5';
...
export default class VueRouter {
 static install: () => void;
 constructor (options: RouterOptions = {}) {
 if (this.fallback) {
 mode = 'hash'
 }
 if (!inBrowser) {
 mode = 'abstract'
 }
 this.mode = mode
  
 switch (mode) {
 case 'history':
 this.history = new HTML5History(this, options.base)
 break
 case 'hash':
 this.history = new HashHistory(this, options.base, this.fallback)
 break
 case 'abstract':
 this.history = new AbstractHistory(this, options.base)
 break
 default:
 if (process.env.NODE_ENV !== 'production') {
 assert(false, `invalid mode: ${mode}`)
 }
 }
 }
}

Register the router-link component globally

At this point, we may ask: When using vue-router, where are the common <router-link/> and <router-view/> introduced?

Back to the install.js file, it imports and globally registers the router-view and router-link components:

import View from './components/view';
import Link from './components/link';
...
Vue.component('RouterView', View);
Vue.component('RouterLink', Link);

In ./components/link.js, the click event is bound to the <router-link/> component by default, and the click triggers the handler method to perform the corresponding routing operation.

const handler = e => {
 if (guardEvent(e)) {
 if (this.replace) {
 router.replace(location, noop)
 } else {
 router.push(location, noop)
 }
 }
};

As mentioned at the beginning, the VueRouter constructor initializes different modes of History instances for different modes, so the methods of router.replace and router.push are also different. Next, we will pull down the source code of these two modes respectively.

hash mode

In the history/hash.js file, the HashHistory class is defined, which inherits from the History base class in history/base.js.
The push method is defined on its prototype: in a browser environment that supports HTML5History mode (supportsPushState is true), history.pushState is called to change the browser address; in other browser environments, location.hash = path is directly used to replace the new hash address.

In fact, I had some doubts when I first read this. Since it is already in hash mode, why do we need to judge supportsPushState? It turns out that in order to support scrollBehavior, history.pushState can pass a key parameter, so that each URL history has a key, and the key is used to save the location information of each route.

At the same time, the setupListeners method bound to the prototype is responsible for listening to the timing of hash changes: in browser environments that support HTML5History mode, it listens to popstate events; in other browsers, it listens to hashchange. After monitoring the changes, the handleRoutingEvent method is triggered, the transitionTo jump logic of the parent class is called, and the DOM replacement operation is performed.

import { pushState, replaceState, supportsPushState } from '../util/push-state'
...
export class HashHistory extends History {
 setupListeners() {
 ...
 const handleRoutingEvent = () => {
 const current = this.current
 if (!ensureSlash()) {
  return
 }
 // The jump method under the parent class History called by transitionTo, the path will be hashed after the jump this.transitionTo(getHash(), route => {
  if (supportsScroll) {
  handleScroll(this.router, route, current, true)
  }
  if (!supportsPushState) {
  replaceHash(route.fullPath)
  }
 })
 }
 const eventType = supportsPushState ? 'popstate' : 'hashchange'
 window.addEventListener(
 eventType,
 handleRoutingEvent
 )
 this.listeners.push(() => {
 window.removeEventListener(eventType, handleRoutingEvent)
 })
 }
 
 push (location: RawLocation, onComplete?: Function, onAbort?: Function) {
 const { current: fromRoute } = this
 this.transitionTo(
 location,
 route => {
 pushHash(route.fullPath)
 handleScroll(this.router, route, fromRoute, false)
 onComplete && onComplete(route)
 },
 onAbort
 )
 }
}
...

// Process the incoming path into a hashed URL
function getUrl (path) {
 const href = window.location.href
 const i = href.indexOf('#')
 const base = i >= 0 ? href.slice(0, i) : href
 return `${base}#${path}`
}
...

// Replace hash
function pushHash (path) {
 if (supportsPushState) {
 pushState(getUrl(path))
 } else {
 window.location.hash = path
 }
}

//Method in util/push-state.js file export const supportsPushState =
 inBrowser &&
 (function () {
 const ua = window.navigator.userAgent

 if (
 (ua.indexOf('Android 2.') !== -1 || ua.indexOf('Android 4.0') !== -1) &&
 ua.indexOf('Mobile Safari') !== -1 &&
 ua.indexOf('Chrome') === -1 &&
 ua.indexOf('Windows Phone') === -1
 ) {
 return false
 }
 return window.history && typeof window.history.pushState === 'function'
 })()

HTML5History Mode

Similarly, the HTML5History class is defined in history/html5.js.

Define the push prototype method and call history.pusheState to modify the browser path.

At the same time, the prototype setupListeners method monitors the popstate event and makes DOM replacements in a timely manner.

import {pushState, replaceState, supportsPushState} from '../util/push-state';
...
export class HTML5History extends History {

 setupListeners() {

 const handleRoutingEvent = () => {
 const current = this.current;
 const location = getLocation(this.base);
 if (this.current === START && location === this._startLocation) {
 return
 }

 this.transitionTo(location, route => {
 if (supportsScroll) {
 handleScroll(router, route, current, true)
 }
 })
 }
 window.addEventListener('popstate', handleRoutingEvent)
 this.listeners.push(() => {
 window.removeEventListener('popstate', handleRoutingEvent)
 })
 }
 push (location: RawLocation, onComplete?: Function, onAbort?: Function) {
 const { current: fromRoute } = this
 this.transitionTo(location, route => {
 pushState(cleanPath(this.base + route.fullPath))
 handleScroll(this.router, route, fromRoute, false)
 onComplete && onComplete(route)
 }, onAbort)
 }
}

...

//Method in util/push-state.js fileexport function pushState (url?: string, replace?: boolean) {
 saveScrollPosition()
 const history = window.history
 try {
 if (replace) {
 const stateCopy = extend({}, history.state)
 stateCopy.key = getStateKey()
 history.replaceState(stateCopy, '', url)
 } else {
 history.pushState({ key: setStateKey(genStateKey()) }, '', url)
 }
 } catch (e) {
 window.location[replace ? 'replace' : 'assign'](url)
 }
}

transitionTo handles route change logic

The two routing modes mentioned above both trigger this.transitionTo when listening. What is this? It is actually a prototype method defined on the history/base.js base class, which is used to handle the routing change logic.

First, use const route = this.router.match(location, this.current) to compare the passed value with the current value and return the corresponding route object. Then determine whether the new route is the same as the current route. If so, return it directly. If not, execute the callback in this.confirmTransition to update the route object and replace the view-related DOM.

export class History {
 ...
 transitionTo (
 location: RawLocation,
 onComplete?: Function,
 onAbort?: Function
 ) {
 const route = this.router.match(location, this.current)
 this.confirmTransition(
 route,
 () => {
 const prev = this.current
 this.updateRoute(route)
 onComplete && onComplete(route)
 this.ensureURL()
 this.router.afterHooks.forEach(hook => {
  hook && hook(route, prev)
 })

 if (!this.ready) {
  this.ready = true
  this.readyCbs.forEach(cb => {
  cb(route)
  })
 }
 },
 err => {
 if (onAbort) {
  onAbort(err)
 }
 if (err && !this.ready) {
  this.ready = true
  // https://github.com/vuejs/vue-router/issues/3225
  if (!isRouterError(err, NavigationFailureType.redirected)) {
  this.readyErrorCbs.forEach(cb => {
  cb(err)
  })
  } else {
  this.readyCbs.forEach(cb => {
  cb(route)
  })
  }
 }
 }
 )
 }
 ...
}

at last

Well, the above is some small knowledge about single page routing. I hope we can go from getting started to never give up~~

This concludes the article on how to thoroughly understand WeChat Mini Program single-page application routing in 10 minutes. For more relevant Mini Program single-page application routing content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!