Detailed explanation of routes configuration of Vue-Router

Detailed explanation of routes configuration of Vue-Router

introduce

In projects using vue-router, instantiating VueRouter is its configuration option routes. This option specifies the relationship between routing and view components or the relationship between routing and other routing. Router configuration options are the most important configuration.

Object attributes in routes

interface RouteConfig = {
  path: string,
  component?: Component,
  name?: string, // named routes *components?: { [name: string]: Component }, // named view components https://router.vuejs.org/zh/guide/essentials/named-views.html#%E5%B5%8C%E5%A5%97%E5%91%BD%E5%90%8D%E8%A7%86%E5%9B%BE
  redirect?: string | Location | Function,
  props?: boolean | Object | Function,
  alias?: string | Array<string>,
  children?: Array<RouteConfig>, // Nested routes beforeEnter?: (to: Route, from: Route, next: Function) => void,
  *meta?: any,
  // 2.6.0+
  *caseSensitive?: boolean, // Is the matching rule case sensitive? (Default value: false)
  *pathToRegexpOptions?: Object // Compile regular expression options}

path: string

Specify the path of the current route. When the browser URL matches the path, router-view will render the current route object to specify the view component component/components

const routes = [
    {
      path: '/',
      component: Home
    },
    {
      path:'/user',
      component: User
    }
  ]
  
  const router = new VueRouter({
    routes
  })

Note that Vue's router supports dynamic paths in the form of "/:property name" as part of the current path string. This string route will be used as a dynamic route to match the response string information on the real URL

const routes = [
    {
      path: '/',
      component: Home
    },
    {
      path:'/user/:id/:local', // dynamic path:id :local
      component: User
    }
]
  
const router = new VueRouter({
    routes,
})
//Route jump <div id="app">
    <router-view />
    // The following links will match /user/:id/:local <router-link to="/user/007/lk">User 007</router-link>
    <router-link to="/user/111/js">User 111</router-link>
    <router-link to="/user/10086/yk">User 10086</router-link>
    <router-link to="/user/241247/la">User 241247</router-link>
</div>
/* When we jump to the above route, the corresponding route view component User can obtain the information matched by the dynamic path through this.$route.params Example: url /user/007/lk this.$route.params -> {id:'007',local:'lk'}
      url /user/10086/yk this.$route.params -> {id:'10086',local:'yk'}
*/

Note that this.$route is the information object of the route where the current Vue application is located.

// http://localhost:8080/#/user/10086/cc?wd=iPhone&aa=test
{
    name: undefined, // Current route name *fullPath: "/user/10086/cc" // Current URL full path *hash: "" // Hash of current route *matched: [{…}] 
    *meta: {}
    params: {id: "10086", local: "cc"} // Dynamic path matches the key-value pair object *path: "/user/10086/cc" // The path matched by the current url query: { // The query string of the url? The object parsed from the following parameters wd: "iPhone",
        aa: "test"
    } 
}

component : Component | () => import(component)

The route component rendered when the current browser URL matches the route path

import Vue from 'vue'
import HotMusicList from '../views/HotMusicList'

const routes = [
  {
    path: '/hot',
    component: HotMusicList
  },
  {
    // Dynamic path matching gets different ids for each song through: id
    path: '/music/:id',
    // Lazy loading of routes, through the form of functions, can allow components in the project that are not allowed to be loaded at the beginning to be loaded into the project // Only when the browser jumps to the current route, the route component will be loaded into the project // The advantage of doing this is to reduce unnecessary loading and reduce application loading speed and running bandwidth component: () => import('../views/MusicPlay') 
  }
]

Note: In project development, if the routing components do not need to be loaded at the beginning of the application, please use lazy loading.

name: string

Give the route a name to make it a named route. The route navigation can be redirected using name. (When the route uses location navigation, only named routes can directly accept pramas parameters)

const routes = [
  {
    path: '/user', 
    name: 'User',
    component: () => import('../views/User.vue')
  }
]

redirect： string | Location | Function

Redirect route. When the current application accesses and navigates to this route, this route will be automatically redirected (in the form of replacement) to the new route specified by redirect.

const routes = [
  {
    path: '/contact',
    component: ContactView
  },
  {
    path: '/user/:id', 
    name: 'User',
    component: () => import('../views/User.vue')
  },
  {
    path: '/oldpath1',
    redirect: '/contact'
  },
  {
    path: '/oldpath2',
    redirect: { name: 'User', params: { name: 'Xiao Ming', age: 19 } }
  },
  /*
      redirect supports the form of a function, which receives a parameter, which is the location object generated when accessing oldpath. The form of the redirect function must return the path or location of the redirect route.
  */
  {
    path: '/oldpath2',
    redirect:(oldpathLocation) => '/contact'
  }
  {
    path: '/oldpath4',
    redirect:(oldpathLocation) => { name: 'User', params: { name: 'Xiao Ming', age: 19 } }
  }
]

props: boolean | Object | Function

Dynamic matching of routes can generally only be done through this.$route.params to obtain the dynamically matched value. When the props property is set, the dynamically matched key-value pairs can be passed directly to the view component as component props, which greatly reduces the coupling of components.

Boolean value. If props is set to true, all key-value pairs in route.params will be set as component props attributes.

const routes = [
  {
    path: '/hot',
    component: HotMusicList
  },
  {
    // Dynamic path matching gets different ids for each song through: id
    path: '/music/:id',
    // Routing lazy loading component: () => import('../views/MusicPlay'), 
    props: true
  }
]
// This.$route.id can be accessed from within the component through the props id
<template>
  <div>
      Song playback <audio controls :src="musicUrl"/>
  </div>
</template>

<script>

export default {
  props: ['id'], // The key-value pair matched by the dynamic path of the route will be automatically passed to the props of the same name of the current component
  data() {
      return {
          musicUrl: ''
      }
  },
  created() {
    fetch(`/song/url?id=${this.id}`)
      .then((res) => res.json())
      .then(({ data }) => {
          //In real development, we need to determine whether the data request is successful console.log(data[0]);
          // Assign the song data to data
        this.musicUrl = data[0]?.url
      });
  },
};
</script>

The object props object form is to use the object key as the name of the rendering component props attribute, and the value is the corresponding attribute value (this way of writing the value will not change, so the props passed are all static attributes)

{
    path: '/home/:id',
    name: 'Home',
    props: {
        a: 1,
        b: false
    },
    component: Home
}

The function props receives the current route information object as a parameter, and returns an object. The key of the object is the name of the props attribute of the rendering component, and the value is the corresponding attribute value.

{
    path: '/home/:id',
    name: 'Home',
    props: (route) => ({
        a: route.query.wd, // pass route query.wd to a props of component Home
        b: route.params.id //Pass route params.id to b props of component Home
    }),
    component: Home
}

alias: string| Array[string]

The alias of the route. You can set multiple paths for one route. When accessing these alias paths, the same routing component will be accessed

const routes = [
  {
    path: '/hot',
    component: HotMusicList,
    alias: ['/list','/rank','recommend']
  }
]

children?: Array[RouteConfig]

Nested routing, you can set secondary routing for the current route

[
    {
    path: '/home',
    component: Home,
    children: [
      {
        path: '/home/follow',
        component: () => import('../views/home/Follow')
      },
      {
        path: 'recommend', //Relative path without / before the route is equivalent to "/home/recommed"
        component: () => import('../views/home/Recommend')
      }
    ]
    }
]

beforeEnter: (to: Route, from: Route, next: Function) => void

The exclusive guard of the route. When the application is about to navigate to the current route, this guard can be used to perform some logical operations to determine whether to block this navigation.

Router instance methods

Concept After configuring the VueRouter instance object into Vue, the vue instance will have a this.$router property, and this.$router is the current VueRouter instance object. It provides all the programmatic navigation APIs.
Note that router is a routing instance object that contains the routing attribute method, router is a routing instance object that contains the routing attribute method, router is a routing instance object that contains the routing attribute method, route is the current browsing access URL routing confidence object

*VueRouter instance properties

  • app configures the Vue root instance of the current router
  • mode The mode currently used by Router "hash" | "history"
  • currentRoute The route information object corresponding to the current route

VueRouter Instance Methods

router.push(string | location)

Programmatically navigate to a specific route

<template>
  <div>
    <h3>Home</h3>
    <div class="tab">
      <router-link to="/home/follow">Follow</router-link>|
      <button @click="gotoRecommend">Recommend</button>
    </div>
    <router-view />
  </div>
</template>

<script>
export default {
  methods: {
    gotoRecommend() {
      // this.$router.push("/home/recommend");
      this.$router.push({path:"/home/recommend", query:{wd:1,offset:0}})
    },
  },
};
</script>

router.replace(string | location)

Programmatically replace the current route with a new route

<template>
  <div>
    <h3>Home</h3>
    <div class="tab">
      <router-link to="/home/follow">Follow</router-link>|
      <button @click="gotoRecommend">Recommend</button>
    </div>
    <router-view />
  </div>
</template>

<script>
export default {
  methods: {
    gotoRecommend() {
      // this.$router.replace("/home/recommend");
      this.$router.replace({path:"/home/recommend", query:{wd:1,offset:0}})
    },
  },
};
</script>

router.go(Int number)

Programmatically move forward and backward a number of items from the current route history stack

this.$router.go(3) // Go forward 3 entries from the current route history stack this.$router.go(-1) // Go back 1 entry from the current route history stack this.$router.go(0) // Force refresh the page

Note that when the forward/backward number is greater than the length of the instance route history stack, it will advance to the last item or back to the first item. However, this is not recommended as it may cause performance issues and page freezes.

router.back()

Programmatically go back one route from the current route history stack

this.$router.back() // equivalent to this.$router.go(-1)

router.forward()

Programmatically move forward one route from the current route history stack

this.$router.forward() // equivalent to this.$router.go(1)

Routing lazy loading

When writing single-page applications with vue.js, the packaged JavaScript package will be very large, which will affect page loading. We can use lazy loading of routes to optimize this problem. When we use a certain route, we will load the corresponding component, which will be more efficient.

No lazy loading

The components are introduced first and loaded in advance. Then it already exists regardless of whether it is used or not

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
]

const router = new VueRouter({
  routes
})

export default router

Use lazy loading

Only when the route is used will the corresponding component be loaded

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/mock',
    name: 'Mock',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/Mock.vue')
  }
]

const router = new VueRouter({
  routes
})

export default router

History mode and hash mode

vue-router default hash mode - use the URL's hash to simulate a full URL, so when the URL changes, the page will not reload.
If we don't want the ugly hash, we can use the history mode of the router, which makes full use of the history.pushState API to complete the URL jump without reloading the page.

History mode

history - uses the new pushState() and replaceState() methods in the HTML5 History Interface. (Requires specific browser support) These two methods are applied to the browser's history stack. Based on the existing back, forward, and go methods (the methods can be viewed in the instance methods of Router), they provide the function of modifying the history. It's just that when they perform modifications, although the current URL is changed, the browser does not immediately send a request to the backend.

Manual Setup

Effect

hash mode

hash - the # symbol in the URL in the address bar (this hash is not a cryptographic hash operation). For example, in this URL: http://localhost:8081/#/form the hash value is #/form. Its feature is that although the hash appears in the URL, it will not be included in the HTTP request and has no effect on the backend, so changing the hash will not reload the page.

Route Guard

Global routing guard

  • router.beforeEach front guard
  • *router.beforeResolve front guard
  • *router.afterEach post guard

Case 1

In projects developed using vue-router, switching between different routes will generally uninstall the leaving route component and mount the entering route component.
In this case, we can perform some logical operations on the page through the declaration cycle of Vue. However, in some cases, if the application wants to improve the user experience, reduce the frequency of uninstallation or preserve the activity of components that leave, use the keep-alive component to wrap router-view and the route switch will uninstall the components that leave. At this time, if your component needs to perform some operations to modify the component's own data DOM programming when the route enters or leaves, you can no longer rely on the vue life cycle. In this case please use route guards inside your component.

  • beforeRouteEnter The routing component is about to enter
  • beforeRouteUpdate (new in 2.2) The route component will be updated -> /music/10086 /music/10010
  • beforeRouteLeave The routing component is about to leave
export default {
  props: ['id'],
  data() {
      return {
          musicUrl: ''
      }
  },

  beforeRouteEnter (to, from, next) {
    // Called before the corresponding route that renders this component is confirmed // No! able! Get the component instance `this`
    //Because the component instance has not been created before the guard is executed console.log(undefined)
  },
  beforeRouteUpdate (to, from, next) {
    // Called when the current route changes but the component is reused // For example, for a path /foo/:id with dynamic parameters, when jumping between /foo/1 and /foo/2,
    // Since the same Foo component will be rendered, the component instance will be reused. And this hook will be called in this case.
    // You can access the component instance `this`
  },
  beforeRouteLeave (to, from, next) {
    // Called when navigating away from the corresponding route of this component // You can access the component instance `this`
  }
}

Note that the component-specific routing guard methods all contain three parameters to from next

  • to : location The target route information object for this route navigation jump
  • from : location The route information object from which this route navigation jumps ()
  • next : function Whether this method allows this route to jump
next() // Allow routing jumps next(true) // Allow routing jumps next(false) // Do not allow routing jumps next('/') / next({ path: '/' }) // Jump to a different address. The current navigation is interrupted and a new navigation is performed. You can pass an arbitrary location object to next, and it allows setting options like replace: true, name: 'home', etc.
// Note that only the next method of beforeRouteEnter can accept a callback function,
// The callback function receives the current routing component instance object as a parameter, through which we can operate the current component beforeRouteEnter(to, from, next) {
    console.log(to , from)
    console.log('The component is about to enter, but the component instance does not exist yet', this)
    next(vm => {
      fetch(`/song/url?id=${vm.id}`)
      .then((res) => res.json())
      .then(({ data }) => {
          //In real development, we need to determine whether the data request is successful console.log(data[0]);
          // Assign the song data to data
        vm.musicUrl = data[0]?.url
      });
    }) // Allow routing to jump }

Case 2

In projects developed using vue-router, switching between different routes will generally uninstall the leaving route component and mount the entering route component.
In this case, we can perform some logical operations on the page through the declaration cycle of Vue. However, in some cases, in order to improve the user experience and reduce the frequency of uninstallation or preserve the activity of components that have left, the keep-alive component can be used to wrap the router-view and the switch of routes will uninstall the components that have left. At this time, if your component needs to perform some operations when the route enters or leaves, you do not need to modify the state of the component itself, but only need to determine whether the jump of this route is allowed. In this case, please use the router-exclusive guard.

beforeEnter(to, from, next) is triggered when the router is about to navigate to the current route const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

Example login verification route exclusive guard configuration

const routes = [
    {
        path: '/',
        component: Home
    },
    {
        path: '/discover',
        component: () => import('../views/Discover')
    },
    {
        path: '/mine',
        component: () => import('../views/Mine'),
        //Route exclusive guard beforeEnter(to, from, next) {
            // Because this guard does not perform any DOM operations or read or write the component's own state // Such a guard can be used as a route-exclusive guard // The correct approach is in the cookie storage if (localStorage.getItem("user")) {
              next();
            } else {
              // There is no this here, next receives a callback function and jumps in the callback function // The following writing enters the personal page and redirects from the personal page to the login page, which may cause some unnecessary bugs
              // next((vm) => {
              // vm.$router.replace('/landr')
              // });
              next({name:'login',params:{to}}); //Prevent this jump and navigate directly to the specified route}
          }
    },
    {
        path: '/landr', // login an register
        component: () => import('../views/loginanregister/LoginAndRegister'),
        children: [
            {
                name:'login',
                path: 'login',
                component: () => import('../views/loginanregister/Login')
            },
            {
                path: 'register',
                component: () => import('../views/loginanregister/Register')
            }
        ]
    }
]

Case 3

Global route guards, when there are multiple routes in the application that need to perform the same logical route guard judgment, and the logical operation does not need to directly operate the component DOM or the status of the component component, then you can use global route guards (the most common application of global guards is login verification)
beforeEach(to,from,next) global front guard

import Vue from 'vue'
import Router from 'vue-router'
import Home from '../views/Home'

Vue.use(Router)

const routes = [
    {
        path: '/',
        name: 'Home',
        component: Home
    },
    {
        path: '/discover',
        name: 'Discover',
        component: () => import('../views/Discover')
    },
    {
        path: '/mine',
        name: 'Mine',
        component: () => import('../views/Mine'),
    },
    {
        path: '/landr', // login an register
        component: () => import('../views/loginanregister/LoginAndRegister'),
        children: [
            {
                name: 'login',
                path: 'login',
                component: () => import('../views/loginanregister/Login')
            },
            {
                path: 'register',
                component: () => import('../views/loginanregister/Register')
            }
        ]
    }
]

const router = new Router({
    routes,
    linkExactActiveClass: 'active'
})
// Global route guard All route jumps will call this guard // Global route guard is also the most suitable place for login verification in Vue router application router.beforeEach((to, from, next) => {

    if(to.name === "Mine" || to.name === "Discover") {
        // Because this guard does not perform any DOM operations or read or write the component's own state // Such a guard can be used as a route-exclusive guard // The correct approach is in the cookie storage if (localStorage.getItem("user")) {
            next();
        } else {
            // There is no this here, next receives a callback function and jumps in the callback function // The following writing enters the personal page and redirects from the personal page to the login page, which may cause some unnecessary bugs
            // next((vm) => {
            // vm.$router.replace('/landr')
            // });
            next({ name: 'login', params: { to } }); //Prevent this redirect and navigate directly to the specified route}
    }else {
        next()
    }

})

export default router

router.beforeResolve(to,from,next) global front guard, after beforeEach is triggered
router.afterEach(to, from) global post-guard, which is triggered when the route has left. This guard has no next, and the next function will not change the navigation itself.

This is the end of this article about the detailed configuration of Vue-Router routes. For more relevant Vue-Router routes configuration content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!

You may also be interested in:
  • How to use vue3+TypeScript+vue-router
  • Detailed explanation of Vue-router nested routing
  • Detailed explanation of vue-router 4 usage examples
  • Vue-router example code for dynamically generating navigation menus based on backend permissions
  • Vue-Router installation process and principle detailed
  • A super detailed Vue-Router step-by-step tutorial
  • Detailed explanation of the installation and use of Vue-Router
  • Complete steps to use vue-router in vue3
  • Vue Router vue-router detailed explanation guide
  • How to use Vue-router routing
  • Vue routing vue-router usage explanation

<<:  Introduction to the usage of common XHTML tags

>>:  Detailed explanation of MySQL Workbench usage tutorial

Recommend

Share 20 JavaScript one-line codes

Table of contents 1. Get the value of browser coo...

Summary of four situations of joint query between two tables in Mysql

Generally speaking, in order to get more complete...

How to start Vue project with M1 pro chip

Table of contents introduction Install Homebrew I...

How to use Nexus to add jar packages to private servers

Why do we need to build a nexus private server? T...

Vue uses WebSocket to simulate the chat function

The effect shows that two browsers simulate each ...

Implementing simple tabs with js

Tab selection cards are used very frequently on r...

Detailed explanation of the concepts, principles and common usage of MySQL stored procedures

This article uses examples to explain the concept...

Steps for encapsulating element-ui pop-up components

Encapsulate el-dialog as a component When we use ...

How to remove the blue box that appears when the image is used as a hyperlink

I recently used Dreamweaver to make a product pres...

Linux Dig command usage

Dig Introduction: Dig is a tool that queries DNS ...

Teach you to quickly build a web cluster project based on nginx

Table of contents 1. Project Environment 2. Proje...

Summary of fragmented knowledge of Docker management

Table of contents 1. Overview 2. Application Exam...

Using JS timer to move elements

Use JS timer to make an element to make a method ...

How to view the type of mounted file system in Linux

Preface As you know, Linux supports many file sys...

Use PHP's mail() function to send emails

Sending emails using PHP's mail function The ...