vue router是vue.js官方的路由管理器。他和vue.js的核心深度集成，让构建单页面应用。

一、安装

  1. // --save的作用是自动把模块和版本号添加到dependencies部分
  2. npm install vue-router --save
  4. // 如果使用的是vue2版本  需要指定vue-router的版本为3.*.* （3的版本）
  5. npm install vue-router@3.5.2 --save
  7. // 卸载
  8. npm uninstall vue-router

二、配置使用

1、router-link的方式

  1. 在**main.js**中引入并使用**vue-router**模块

    1. import Vue from 'vue'
    2. // 1.引入vuerouter组件
    3. import VueRouter from "vue-router"
    4. // 2.使用路由组件
    5. Vue.use(VueRouter)

  2. 创建切换页面的视图 ```vue

``` ```vue ``` 3. **HTML配置 使用页面** ```vue 
  2. 4. **对router进行配置**
  3. ```javascript
  4. // 1.定义路由
  5. const routes = [
  6.   { path: "/home", component: Home },
  7.   { path: "/hello", component: Hello },
  8. ];
  10. // 2.创建router实例，然后传“routes”配置
  11. const router = new VueRouter({
  12.   routes: routes
  13. })
  15. new Vue({
  16.   render: h => h(App),
  17.   router // 挂载实例
  18. }).$mount('#app')

2、编程式导航方式

  1. <template>
  2. <div>
  3.   <h3>我是HELLO页面</h3>
  4.   <button @click="clickHandle">点我跳转home</button>
  5.   </div>
  6. </template>
  8. <script>
  9.   export default {
  10.     methods: {
  11.       clickHandle() {
  12.         // 两种方式
  13.         // 编程式导航 字符串方式
  14.         this.$router.push("/home");
  15.         // 编程式导航 对象方式
  16.         /*this.$router.push({
  17.           path: "/hello",
  18.         });*/
  19.       },
  20.     },
  21.   };
  22. </script>
  24. <style>
  25. </style>

3、Vue CLI

创建项目时，直接添加路由配置
image.png