1, Single page application SPA

Single page application: all functions are implemented on one page

Single page - Multi page comparison:

Comparison part	Single page application	Multi page application
form	An html file consists of multiple components	Multiple html files
Static resource common	Shared, one-time loading completed	Not shared. Each page is loaded once
refurbish mode	Page local refresh	Full page load
url mode	itcast.com/#/pageone	itcast.com/pageone.html
User experience	Good user experience	Page switching loading is slow and the experience is poor
Data transmission	easily	url dependent parameter transfer, cookie,localStorage
Search engine optimization	It is not conducive to seo optimization and needs ssr optimization	Good support
Usage scenario	The pursuit of high experience does not require seo	Height requirements seo
development cost	It needs to rely on professional framework and has high development efficiency	Low duplication of code and low development efficiency

2, Routing usage

• The essence of front-end Routing: change and listen to the hash value of url, and switch the component component of mount point
• Routing in vue: it is the corresponding relationship between hash and component, and a hash value corresponds to a component
• . vue files are divided into two categories: page components (page display, with routing) and reuse components (display data, for reuse)
• Use of Vue router module

//1. Installation
yarn add vue-router

//2. Import route 	 main.js
import VueRouter from 'vue-router'

//3. Use routing plug-in
// In vue, all plug-ins using vue need to call vue use()
Vue.use(VueRouter)

//4. Create routing rule array	
const routes = [
  {
    path: "/home",
    component: MyHome
  },
  {
    path: "/movie",
    component: MyMovie
  },
  {
    path: "/about",
    component: MyAbout
  }
]

//5. Create routing instance object - incoming routing rule array	
const router = new VueRouter({
  routes
})

//6. Associate to vue instance and mount the routing instance object
new Vue({
  router
})

//7. Replace components with router view and mount point
<router-view></router-view>

3, Link navigation

Function: the global component router link can be used to replace the a tag

• Vue router provides a global component router link: used to provide routing links
• Router link will eventually render as a link; The to attribute will be rendered as a href attribute by default; The value of the to attribute is rendered as a # starting hash address by default
• Router link provides the function of link navigation, active class attribute and user-defined highlighted class name

<router-link active-class="active" to="/home">home page</router-link>


<router-link exact-active-class="active" to="/home">home page</router-link>

• Router view: route filling bit (route placeholder). The components matched by route rules in the future will be rendered to the location of the router view
• Jump to pass parameters. When jumping to a route, you can pass values to the components corresponding to the route

// ? key=value uses $route query. Key value
<li><router-link to="/goods?name=loose coat">Look at the coat</router-link></li>

// /The value is in advance in the routing rule / path/:key with $route params. Key value
<li><router-link to="/goods/trousers">Look at the pants</router-link></li>

4, Redirect

Function: by default, a routing page is forced to be displayed. If you can't find a path, give a prompt page

import NotFound from "@/components/NotFound";

const routes = [
  {
    path: "/",
    redirect: "/home" // redirect
  },
  // ... Normal routing
  { // When the above routes do not match, match the wildcard to display the not found page
    path: "*",//Match all paths
    component: NotFound
  }
]

5, Pattern

Function: modify the routing mode in the address bar

const router = new VueRouter({
  routes,
  mode: "history" // Background support is required after packaging and going online. The mode is hash
})

• hash routing, for example: http://localhost:8081/#/home
• history routing, for example: http://localhost:8081/home (server side support after deployment)
• abstract mode: do not display routing paths

6, Programming navigation

Function: jump with js code and use a tag when navigating links

this.$router.push({
    path: "Routing path", // Go to router / index JS definition, which can be seen on the page and displayed on the path
    
    name: "Route name"  //Not visible on the page
})

• Jump pass parameter

//The first corresponding route receives $route params. Key value
//name+params - > pass in memory (no refresh)
this.$router.push({
    name: "Route name",
    params: {
        "key": value
    }
})

// The second corresponding route receives $route query. Key value
// path+query - > in url? transmit
this.$router.push({
    path: "Routing path",
    query: {
        "key": value
    }
})

7, Route nesting

Function: nest the secondary routes under the existing primary routes

main.js - special routing configuration and export routing objects

• The first level routing path is defined from /

• The second level route writes the name directly after the path, and does not need to start with /

• Nested routing writes a routing information object in the children array of the parent route

const routes = [
    {
        path: "/",
        redirect: "find"
    },
    {
        path: "/find",
        component: FindMusic,
        // 1. Find out which level of routing subordinates belong to
        // 2. The secondary routing path does not need to be added/
        children: [
              {
                path: "recommend",
                component: Recommend
              }
        ]
    }
];

8, Routing guard

• Global front guard: a function will be triggered before route jump

// Routing front guard
router.beforeEach((to, from, next) => {
  // To represents the path to jump to. The value of to is an object that can be printed
  // From stands for which path to jump from
     
  console.log(to);
  console.log(from);

  // fullPath tape? For the following parameters, path is the complete path
  console.log("The route is about to jump");

  // Simulate and judge whether you have logged in. You can go to my music after logging in
  let loginFlag = false; // Suppose false means you are not logged in
  if (to.path == "/my" && loginFlag == false) {
    // If you go to the personal center page, judge that you are not logged in, prompt you to log in (and force you to jump back to find)
    alert("Please login first!");
    next("/find");
  } else {
    // If you don't go to the / my page, jump directly
    next();
  }
});

• Global post guard: the function triggered after route jump

router.afterEach((to, form) => {
    console.log(to);
    console.log(form);
    console.log("The route has jumped");
})