How to use Vue-Router to implement lazy loading of routes in a Vue application?

In a Vue application, using Vue-Router to implement lazy loading of routes can greatly improve the performance of the application. Using routing lazy loading, some codes and components can be loaded only when they are needed, avoiding loading them all at the beginning of the application, thus reducing the loading time of the application and improving the user experience.

Vue-Router is the official routing manager of Vue.js, which can implement the routing function of the application. To use Vue-Router in Vue to implement lazy loading of routes, you need to use the code splitting function in Webpack. This article will introduce how to use Vue-Router to implement lazy loading of routes in Vue applications, and provide specific code examples.

Step 1: Install Vue-Router

To use Vue-Router to implement lazy loading of routes, you must first install Vue-Router. Use npm to install Vue-Router:

npm install vue-router --save

Step 2: Create a Vue instance

In the router option of the Vue instance, use routing lazy loading:

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

const Foo = () => import('./Foo.vue')
const Bar = () => import('./Bar.vue')

const router = new Router({
  routes: [
    { path: '/foo', component: Foo },
    { path: '/bar', component: Bar }
  ]
})

new Vue({
  router
}).$mount('#app')

In the above code, The import() function is used to import the Foo and Bar components, and const is used to assign them to variables. The import() function here is the dynamic import method provided by Webpack, which can create a separate block for each component. In the router option of the Vue instance, just use the imported component directly.

Step 3: Routing lazy loading optional configuration

In addition to using the default Webpack configuration for code splitting, Vue-Router also provides some optional configurations to help developers control it in more detail Code splitting improves the efficiency of lazy loading.

const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')

const router = new Router({
  routes: [
    { path: '/foo', component: Foo },
    { path: '/bar', component: Bar }
  ],
  mode: 'history',
  fallback: true,
  scrollBehavior (to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    } else {
      return { x: 0, y: 0 }
    }
  },
  base: process.env.BASE_URL,
  linkActiveClass: 'active',
  linkExactActiveClass: 'exact-active',
  beforeEach: (to, from, next) => {},
  afterEach: (to, from) => {}
})

• webpackChunkName: Specify a name for the component, and Webpack will create chunks for each chunk based on the name. If two components use the same name, they can be placed in the same block, further reducing lazy loading time.
• mode: Use HTML5 history mode, which requires server support.
• fallback: When the browser does not support HTML5 history mode, this option specifies whether it should fall back to hash mode.
• scrollBehavior: used for scrolling behavior when jumping to a page.
• base: Basic URL. For example, when using vue-router, if we plan to deploy the application in a subdirectory, then use the base option to specify the directory.
• linkActiveClass: Specifies the CSS class name of the active link.
• linkExactActiveClass: Specify the CSS class name that exactly matches the activation link.
• beforeEach: Global routing guard, which can be registered before the routing change hook.
• afterEach: Global routing guard, which can be registered after the routing change hook.

Summary

Using Vue-Router in a Vue application to implement lazy loading of routes can greatly improve the performance of the application. We can use the code splitting function in Webpack to achieve lazy loading. Use Vue-Router's import() function to import the component, assign it to a variable using const, and then use the imported component in the routing options. At the same time, Vue-Router also provides some optional configurations, which can help developers control code splitting in more detail and improve the efficiency of lazy loading.

The above is the detailed content of How to use Vue-Router to implement lazy loading of routes in a Vue application?. For more information, please follow other related articles on the PHP Chinese website!