Vue-router implements two routing modes:

I. Hash mode

  • Hash routes appear with #, for example localhost:8080/#/home. Hash mode rendering starts by configuring the route array list, e.g. [{path: ‘/home’,name:’home’, Component :’ home.vue’},{path: ‘/about’,name:’about’, Component: ‘about.vue’}], select the route array item based on the route address. There will be a router-view component on the page, which will render the corresponding component based on the route address. Router-view has a render(h => h(Componernt)) method to render the corresponding Component

Copy router code according to vue-Router principle

  • index.js
import Home from ".. /components/Home.vue";
import Vue from "vue";
import VueRouter from "./router-core";

Vue.use(VueRouter);

const routes = [
  {
    name: "home".path: "/".component: Home
  },
  {
    name: "about".path: "/about".component: () = > import(".. /components/About.vue")}];const router = new VueRouter({
  mode: "history".base: process.env.BASE_URL,
  routes
});

export default router;
Copy the code
  • router-core.js

let Vue; 
class VueRouter {
  constructor(options) {
    this.$options = options;
    const initial = window.location.hash.slice("#") | |"/";
    Vue.util.defineReactive(this."current", initial);

    window.addEventListener("hashchange".() = > {
      this.current = window.location.hash.slice(1);
      console.log(this.current);
    });
  }
}

VueRouter.install = function(_Vue) {
  Vue = _Vue;
  Vue.mixin({
    beforeCreate() {
      if (this.$options.router) {
        Vue.prototype.$router = this.$options.router; }}}); Vue.component("router-link", {
    props: {
      to: {
        type: String.required: true}},render(h) {
      return h("a", { attrs: { href: "#" + this.to } }, this.$slots.default); }}); Vue.component("router-view", {
    render(h) {
      let component = null;
      const route = this.$router.$options.routes.find(
        route= > route.path === this.$router.current
      );
      if (route) {
        component = route.component;
      }
      returnh(component); }}); };export default VueRouter;
Copy the code
  • Introduce router/index.js in main.js
import Vue from "vue";
import App from "./App.vue";
import router from "./router";

Vue.config.productionTip = false;

new Vue({
  router,
  render: h= > h(App)
}).$mount("#app");

Copy the code

Second, history mode

  • History is an interface provided by the browser history stack. You can use methods such as back(),forward(), and go() to read the browser history stack information and perform various jumps.
window.history.pushState(stateObject, title, URL)
window.history.replaceState(stateObject, title, URL)
Copy the code
  • StateObject: When the browser jumps to a new state, the popState event fires, which carries a copy of the stateObject parameter
  • Title: Title of the record to be added
  • Url: INDICATES the URL of the record to be added

  1. Push: Similar to hash mode, except window.hash is changed to window.pushstate

  2. Replace: Similar to the hash mode, but change window.replace to window.replacestate

  3. Listen for address changes: Listen for popState (window.onpopState) in the constructor of Html5History