2.1 路由介绍及其使用

一、概述

Vue-Router 其实就是帮助你根据不同的 url 来展示不同的页面（组件），建议单独用 config 目录（文件夹）来集中放置路由文件。

ps：有些组件库可能自带了和 Vue-Router 的整合，所以尽量先看组件文档、省去自己写的时间。

二、使用

官方文档：Vue Router | Vue.js 的官方路由 (vuejs.org)

1、安装路由

npm install vue-router@4

此时可以发现依赖里面多了个router，表示已经安装好了

2、新建config文件夹，route.ts文件

在route.ts文件中创建路由器实例

首先，路由器实例是通过调用 createRouter() 函数创建的，所以从vue-router中引入createRouter（）函数

然后，把要跳转的页面import进去，同时要注意把路径写对，一定要写到.vue

其次，调用并定义路由，一共分为四步，调用 createRouter() 函数、书写history工作模式、制定路由规则、暴露

ps：暴露的时候名字别写错了

这里的 routes 选项定义了一组路由，把 URL 路径映射到组件。其中，由 component 参数指定的组件就是待会儿在 App.vue 中要被 <RouterView> 渲染的组件。这些路由组件通常被称为视图，但本质上它们只是普通的 Vue 组件。 

3、进入main.ts文件 

一旦创建了我们的路由器实例，我们就需要将其注册为插件

首先，在main.ts中引入路由（观察自己的文件路径）

其次，通过调用 use() 来完成挂载，和大多数的 Vue 插件一样，use() 需要在 mount() 之前调用。

4、进入App.vue文件

（1）确定何处跳转

一般是使用 RouterLink 来创建链接。这使得 Vue Router 能够在不重新加载页面的情况下改变 URL，处理 URL 的生成、编码和其他功能。

（图中代码只是官网示例） 

（2）确定跳转的东西展示在哪里

RouterView 组件可以使 Vue Router 知道你想要在哪里渲染当前 URL 路径对应的路由组件。它不一定要在 App.vue 中，你可以把它放在任何地方，但它需要在那个.vue文件中的script区域被导入，否则 Vue Router 就不会渲染任何东西。

（3）在当前.vue文件中引入RouterLink,RouterView

 此时打开网页可以看到Vue下面出现routes，同时得到带路由的跳转

/team就是之前制定路由的时候写的那个path

 三、补充

有些组件库可能自带了和 Vue-Router 的整合，所以尽量先看组件文档、省去自己写的时间。

例如Vant4中的Tabbar组件就自带路由模式

可以直接写，不用import引入，只需要写 RouterView 的位置就OK