Vue life cycle

Vue syntax and concepts

  • Difference expression
  • Instructions (14)
  • Evaluate properties and listeners
  • Class and style binding
  • Conditional and list rendering
  • Form input rendering
  • component
  • slot
  • The plug-in
  • With mixins
  • Deep into the responsivity principle
  • Different build versions of vUE

Vue Router principle

The basic use

import Vue from "vue";
import VueRouter from "vue-router";
import Index from "./views/Index.vue";

Vue.use(VueRouter);

const routes = [
    {
        path: "/".name: "Index".component: Index,
    },
    {
        path: "/blog".name: "Blog".// route level code-splitting
        // lazy-loaded
        component: import(/* webpackChunkName: "blog" */'./views/Blog.vue'),}];const router = new VueRouter({
    routes
});

new Vue({
    router,
    el: "#app"
});


Copy the code
// Index.vue
<template>
    <router-view></router-view>
</template>

Copy the code

The router injects $route and $router attributes into the component.

Dynamic Route Matching

Const routes = [{path: "/blog/:id", name: "blog", // route parameter id is passed to the component props: true, Component: blog}]Copy the code

Embedded routines by

const routes = [
    {
        path: "/".component: Layout,
        children: [{path:"".name:"index".component: Index
            }
        ]
    }
]
Copy the code

Blog.vue

<script>
export default {
    name: "blog",
    props: ["id"]
}

</script>

Copy the code

Programmatic navigation

/ / string
router.push('home')

/ / object
router.push({ path: 'home' })

// Named route
router.push({ name: 'user'.params: { userId: '123' }})

// With query parameters, change to /register? plan=private
router.push({ path: 'register'.query: { plan: 'private' }})

Copy the code

Difference between Hash mode and History mode

  • The Hash mode is based on the anchor point, along with the onHashchange event
  • The History mode is based on HTML5history API
    • History.pushstate () is not supported until after IE10
    • history.replaceState()

Use of History mode

  • History requires server support

In history mode, if the browser refreshes, a request is made to the server, which may return 404 if the server is not configured.

History mode – nodejs

const path = require("path")
const history = require("connect-history-api-fallback")
const express = require("express");

const app = express();

app.use(history)
app.use(express.static(path.join(__dirname, "./public"));

app.listen(3000.() = > {
    console.log("Server on, port: 3000")})Copy the code

History mode – nginx

start nginx
nginx -s reload

nginx -s stop

Copy the code
http {

    location / {
        root html;
        index index.html index.htm
        try_files $uri $uri/ /index.html
    }
}

Copy the code

Implementation principle in VueRouter History mode

VueRouter class diagram

let _Vue = null;

export default class VueRouter {
  static install(Vue) {
    // 1. Check whether the plug-in is installed
    if (VueRouter.install.installed) {
      return;
    }
    VueRouter.install.installed = true;

    // 2, record the Vue constructor to the global variable
    _Vue = Vue;
    Inject the Routes object passed when creating the Vue instance into the Vue instance
    / / with
    _Vue.mixin({
      beforeCreate() {
        if (this.$options.router) {
          _Vue.prototype.$router = this.$options.router;
          this.$options.router.init(); }}}); }constructor(options) {
    this.options = options;
    this.routeMap = {};
    // Create a responsive object
    this.data = _Vue.observable({
      current: "/"}); }init() {
    this.createRouteMap();
    this.initComponents(_Vue);
    this.initEvent();
  }

  createRouteMap() {
    // Iterate through all the routing rules, parsing the routing rules into key-value pairs and storing them in the routeMap
    this.options.routes.forEach((route) = > {
      this.routeMap[router.path] = router.component;
    });
  }

  initComponents(Vue) {
    const self = this;
    Vue.component("router-link", {
      props: {
        to: String,},// The Runtime vue does not support the template template
      // template: '
       ',
      render(h) {
        return h(
          "a",
          {
            attrs: {
              href: this.to,
            },
            on: {
              click: this.clickHandler,
            },
          },
          [this.$slote.default]
        );
      },
      methods: {
        clickHandler(e) {
          history.pushState({}, "".this.to);
          // This will trigger a re-rendering of the component
          this.$router.data.current = this.to; e.prevenDefault(); ,}}}); Vue.component("router-view", {
      render(h) {
        // The component corresponding to the current route
        const component = self.routeMap[self.data.current];
        returnh(component); }}); }initEvent() {
    // The popState event is triggered when history is activated
    window.addEventListener("popstate".() = > {
      this.data.current = window.location.pathname; }); }}Copy the code