Vue3: vue-router 的基本用法

1、什么是 vue-router

• vue-router 是 vue.js 官方给出的路由解决方案。它只能结合 vue 项目进行使用，能够轻松的管理 SPA 项目中组件的切换。

2、 vue-router 的版本

• vue-router 目前有 3.x 的版本和 4.x 的版本。其中：
  ⚫ vue-router 3.x 只能结合 vue2 进行使用
  ⚫ vue-router 4.x 只能结合 vue3 进行使用
• vue-router 3.x 的官方文档地址
• vue-router 4.x 的官方文档地址

3、vue-router 4.x 的基本使用步骤

① 在项目中安装 vue-router
② 定义路由组件
③ 声明路由链接和占位符
④ 创建路由模块
⑤ 导入并挂载路由模块

3.1 在项目中安装 vue-router

• 在 vue3 的项目中，只能安装并使用vue-router 4.x。安装的命令如下：
  

3.2 定义路由组件

• 在项目中定义 MyHome.vue、MyMovie.vue、MyAbout.vue三个组件，将来要使用vue-router 来控制它们的展示与切换：
  

3.3 声明路由链接和占位符

• 可以使用 标签来声明路由链接，并使用 标签来声明路由占位符。示例代码如下：
  

3.4 创建路由模块

• 在项目中创建 router.js 路由模块，在其中按照如下4 个步骤创建并得到路由的实例对象：
  ① 从 vue-router 中按需导入两个方法
  ② 导入需要使用路由控制的组件
  ③ 创建路由实例对象
  ④ 向外共享路由实例对象
  ⑤ 在 main.js 中导入并挂载路由模块

3.4.1 从 vue-router 中按需导入两个方法

3.4.2 导入需要使用路由控制的组件

3.4.3 创建路由实例对象

3.4.4 向外共享路由实例对象

3.4.5 在 main.js 中导入并挂载路由模块