Objective: To understand the use of vue-Router

Reading time: 5 minutes

Source: Not original, edited from video

The main content

  1. Vue-route basic usage
  2. How about the router’s hooks and execution order
  3. Parameter transfer mode of the router

The body of the

router.gif

1. Basic use

1-1. Create a Route folder and create index.js

import Vue from 'vue';
import VueRouter from 'vue-router';
import Routes from './routes.js'

Vue.use(VueRouter);

export default new VueRouter {
  mode: 'hash',
  routes
}

Copy the code

Note two points in the above code:

  • First point: all third-party components of VUE need to be installed via vue.use (..).

    • When the Router component is installed, two global components are registered
      • The router – link: jump
      • Router-view: Where is the content displayed
    • Each component will have two properties(THERE was a time when I didn’t know the difference between a router and a route.

      • $router: contains all methods

        • $router.push({path:’home’})
        • $router.replace({path:’home’})// Replace routes with no history

      • $route: contains all attributes

  • Export default new VueRouter ({}) contains the mapping table of various attributes and routes

    • Mode: hash: default value, /#/
    • mode: history: /
    • Routes Mapping. Which routes show which VUE components
    • .

1-2: to establish routes. Js

import Home from '.. /view/Home.vue'; . exportdefault[{path: '/'.// Redirect to the home page
    redirect: '/home'
  },
  {
    path: '/home'.component: Home
  }
  ...
]
Copy the code

1-3: Register the router in main.js

. import routerfrom './router'. new Vue({ router,render: h= > h(App),
}).$mount('#app')
Copy the code

OK: At this point, basic routing is implemented

Let’s go to app.js and use router-link and router-View


<template>
  <div id="app">
    <ul class="nav">
      <li class="nav-item">
        <router-link class="nav-link" to="/home">Home</router-link>
      </li>
    </ul>
    <router-view></router-view>
  </div>
</template>

Copy the code

Routing lazy loading looks like this.

{
  path: '/home'.component: (a)= > import('.. /view/Home.vue')}Copy the code

Nested routines look like this.

{
    path: '/user'.component: User,
    // Place paths and views that need to be nested under child
    children: [
      ...
      {
        path: '/add'.name: 'userAdd'.component: (a)= > import('.. /view/UserAdd.vue')}... ] },Copy the code

2. What is the hook and execution sequence of the router

  1. Global beforeEach: Generally used for permission control.
  2. BeforeEnter in routes: not used much
  3. Component calls beforeRouteEnter: there is no this in this method
  4. Global router. Resolve
  5. Global afterEach
  6. Call the component’s beforeRouterLeave: alert to leave, whether to submit the form, whether to pay attention, etc
  7. beforeRouterUpdate

BeforeRouterUpdate is used when the route parameters are updated but the route is not.

router.beforeEach((to, from, next) = > {
  // Each route hook takes three arguments: to, from, and next
  // I will write a separate article on how to use the JWT permission control. In that article, I will explain the use of three parameters and the use of the routing hook
})
Copy the code

Here, I only talk about the order of execution, the specific can refer to the official manual, or pay attention to my next permission control section.

3. How are parameters passed

Parameters can be passed in two ways

Route :/detail/1 Vs path :/detail? id=1

  • Parameters are passed in the route
Vue code is as follows: <router-link to="/user/detail/1"> user 1</router-link> ----- routes </router-link>'detail/:id',
    name: 'userDetail',
    component: () => import('.. /view/UserDetail.vue')} ---- How do you get this parameter in a component? this.$route.params.id

Copy the code
  • Pass parameters in the path as question marks
<router-link to="/user/detail? id=1"> user 1</router-link> how does this pass get parameters in the component? this.$route.query.id
Copy the code

Summary: This article briefly discusses how to initialize a route, nested routes, the execution order of the route hook and the way the parameters are passed.

I will write a complete small demo in the next article, which will describe the use of the routing hook in the permission control, the use of JWT, and the basic implementation of the permission control.

Ps: I am a front-end beginner, blog is completely a way to record their own learning, writing must be unclear and imperfect and mistakes. If there is anything wrong, I hope your criticism and correction will be appreciated.

Thanks for watching!

I am Haiming Yue, a primary school student.