Introduction and use of vue-router front-end routing

What is front-end routing?

The correspondence between the hash value and the component, when the hash value in the url changes, the front-end routing will detect it, and then the routing will render the component corresponding to the current hash value to the page.

how to use?

Use of non-routing components

Non-routing components are generally placed in the components folder, and the components are introduced first on the used page, and then registered, as shown in the figure below, the HelloWorld component is introduced in app.vue

Use of routing components

1. Installation of the vue-router plugin

npm install --save vue-router

 2. Create a routing component

Create a new folder views under src to put routing components, home and login are new routing components

3. Configure routing

(1) Create a new router folder under src

 (2) The content of routing in index.js is as follows

// 配置路由相关信息

import Vue from 'vue'
import Router from 'vue-router'  //引入路由 

Vue.use(Router)  //使用路由插件

//创建路由对象
export default new Router({
    routes: [
        //配置路由组件之间的映射关系
        {
            path: '/home',
            name: 'home',
            component: () => import('@/views/home/index.vue') //路由懒加载
        },
        {
            path: '/login',
            name: 'login',
            component: () => import('@/views/login/index.vue')
        },
      
    ]
})

Why use lazy loading of routes?

Lazy loading of routes allows components to be loaded only when they are used, which can reduce the loading time of the home page

4. Mount the Router on the vue instance

5. Use routing

 possible problems

1. The corresponding version is not compatible

The version number was not selected during installation, resulting in the latest version being installed by default, which may not be compatible with other plug-ins. You need to reinstall the old version. It is recommended to use the stable version [email protected]

This is just a brief introduction to the use of routing. There are many usages in vue-router, which will be summarized one by one later.