vue 中引入 vue-router

H4 官方学习地址：https://v3.router.vuejs.org/zh/installation.html

备注：vue3 项目一般用的是 4.x的版本，这里我们项目用的是vue2 一般用的是3.x版本的；

1. 安装 vue-router

   https://www.npmjs.com/package/vue-router?activeTab=versions
   # 可以在上述网址去寻找当前比较稳定版本
   
   # 使用 npm 命令进行安装
   npm i vue-router@3.6.5
   

2. 在 /src 路径下创建 router/index.js 文件进行路由划分

   import Vue from "vue";
   import VueRouter from "vue-router";
   
   Vue.use(VueRouter)
   
   // 1. 创建路由组件 
   // 在 views 下面定义每个界面的 router 组件
   // const Foo = { template: '<div>foo</div>' }
   // const Bar = { template: '<div>bar</div>' }
   // 可以从其他文件 import 进来, 比如下面的写法
   import Home from '../views/Home.vue'
   import User from '../views/Users.vue'
   
   // 2. 定义路由
   // 每个路由应该映射一个组件。 其中"component" 可以是
   // 通过 Vue.extend() 创建的组件构造器，
   // 或者，只是一个组件配置对象。
   // 我们晚点再讨论嵌套路由。
   const routes = [
     { path: '/home', component: Home },
     { path: '/user', component: User }
   ]
   
   // 3. 创建 router 实例，然后传 `routes` 配置
   // 你还可以传别的配置参数, 不过先这么简单着吧。
   const router = new VueRouter({
       routes // (缩写) 相当于 routes: routes
     })
   
   // 4. 创建和挂载根实例。
   // // 记得要通过 router 配置参数注入路由，
   // // 从而让整个应用都有路由功能
   // const app = new Vue({
   //     router
   //   }).$mount('#app')
   
   // 将 router 实例 对外暴露 去 main.js 中区挂载
   export default router
   

3. 在/src 路径下创建 views 路由组件文件夹，定义路由组件

<!-- Home.vue -->
<template>
    <h1>我是 Home 页面</h1>
</template>

<script lang="ts">
export default{
    data() {
        return {}
    },
}
</script>

4. 在 main.js 中引入 router 并挂载到 app上

   import Vue from 'vue'
   import App from './App.vue'
   // 引入 router
   import router from './router'
   
   Vue.config.productionTip = false
   
   new Vue({
     router,
     render: h => h(App),
   }).$mount('#app')
    
   

5. 在 App.vue 中匹配到 路由后进行页面渲染