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。安装的命令如下：
安装vue-router
3.2 定义路由组件
-
在项目中定义 MyHome.vue、MyMovie.vue、MyAbout.vue三个组件，将来要使用vue-router 来控制它们的展示与切换：
3.3 声明路由链接和占位符
-
可以使用 <router-link> 标签来声明路由链接，并使用 <router-view> 标签来声明路由占位符。示例代码如下：
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 中导入并挂载路由模块
