[Complete project construction] Realize vue front-end construction test system based on vue-cli - ③Introduce vue-router in project development and configure it

1. Introduce vue-router : search for vue-router and open the official document of vue-router

 2. Since this project is developed based on vue2, switch the official website to version v3.x, and select the npm installation method under the navigation-installation directory

The installation command is as follows

npm install vue-router

 Since the above command will install the latest version instead of the adapted v3.x version, use the @ method to specify the version number

npm install vue-router@版本号

① Through Baidu npm, you can find the latest version of v3.x (vue-router 3) in npm

②Type vue-router on the npm official website to search and select the first item

 

 ③Click versions to find the corresponding version number

 From the above figure, it is found that the latest version number of v3.x is 3.6.5, open the vscode terminal to install

The installation command is as follows, enter and press Enter to install

 npm install [email protected]

Download completed

Open package.json to verify

3. Configure vue-router : create a new router folder in the src directory, and create a new index.js file in the router folder

Open the vue-router official document and find that if you use it in a modular project, you must  Vue.use() explicitly install the routing function:

 The relevant code is as follows:

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

Vue.use(VueRouter)

Configure the above code to the index.js file under the router folder

 Open the official document, which is detailed in Getting started-javascript

The relevant code is as follows:

// 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)

// 1. 定义 (路由) 组件。
// 可以从其他文件 import 进来
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器，
// 或者，只是一个组件配置对象。
// 我们晚点再讨论嵌套路由。
const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

// 3. 创建 router 实例，然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
  routes // (缩写) 相当于 routes: routes
})

// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
const app = new Vue({
  router
}).$mount('#app')

// 现在，应用已经启动了！

4. According to the instructions of javascript, first create a new views folder under the src folder and register the .vue component

 ① After the component registration is completed, reference it in index.js under the router folder

 code show as below:

//创建路由组件
import Home from '../views/Home.vue'
import User from '../views/User.vue'

②Map routing and components

code show as below:

//将路由与组件进行映射
const routes = [
    { path: '/home', component: Home},
    { path: '/user', component: User}
  ]

③ Create a router instance

 code show as below:

//创建 router 实例
const router = new VueRouter({
    routes // (缩写) 相当于 routes: routes
})

④ Expose the router instance to the outside world

code show as below:

//将当前router实例对外进行暴露
export default router

 The complete code of index.js under the router file is as follows:

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)


//创建路由组件
import Home from '../views/Home.vue'
import User from '../views/User.vue'



//将路由与组件进行映射
const routes = [
    { path: '/home', component: Home },
    { path: '/user', component: User }
]

//创建 router 实例
const router = new VueRouter({
    routes // (缩写) 相当于 routes: routes
  })

//将当前router实例对外进行暴露
export default router

5. Create and mount the root instance, open main.js under the src file, and import router

 Mount on the current instance​​​​

 The complete code of the main.js file is as follows:

import Vue from 'vue'
import App from './App.vue'

//全局引入element ui
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

//引入router
import router from './router'

//对element ui进行全局注册
Vue.use(ElementUI);

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

6. Match the routing exit and render the component in the App.vue file

 code show as below:

①Match routing exit

  <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>

②App.vue complete code:

<template>
  <div id="app">
    <!-- <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/> -->
    <!-- <el-row>
      <el-button>默认按钮</el-button>
      <el-button type="primary">主要按钮</el-button>
      <el-button type="success">成功按钮</el-button>
      <el-button type="info">信息按钮</el-button>
      <el-button type="warning">警告按钮</el-button>
      <el-button type="danger">危险按钮</el-button>
    </el-row> -->

    <!-- 路由出口 -->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>
    
  </div>
</template>

<script>
//import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  // components: {
  //   HelloWorld
  // }
}
</script>

<style>

</style>

7. Start the project for verification

found project error

Solution: open vue.config.js, add lintOnSave: false;

 Save and re-run [sometimes the operation fails to close vscode first, and re-enter the npm run serve command in the terminal]

 The initial entry page is as follows:

 Realize route switching by changing the URL address (adding user or home)

 So far, the vue-router code configuration is complete