vue从入门到入土---复习 路由

目录

前端路由的概念与原理

 vue-router 的基本用法

 vue-router 的高级用法

后台管理案例

 总结

---

前端路由的概念与原理

1. 什么是路由

路由（英文：router）就是对应关系。路由分为两大类  ① 后端路由    ② 前端路由

2. 回顾：后端路由

后端路由指的是： 请求方式 、 请求地址 与 function 处理函数 之间的 对应关系 。在 node.js 课程中，express 路由的基本用法如下

 3. SPA 与前端路由

SPA 指的是一个 web 网站只有唯一的一个 HTML 页面， 所有组件的展示与切换 都在这唯一的一个页面内完成。 此时， 不同组件之间的切换 需要通过 前端路由 来实现。

结论：在 SPA 项目中， 不同功能之间的切换 ，要 依赖于前端路由 来完成！

4. 什么是前端路由        

通俗易懂的概念： Hash 地址 与 组件 之间的 对应关系

5. 前端路由的工作方式

• ① 用户点击了页面上的路由链接
• ② 导致了 URL 地址栏中的 Hash 值发生了变化
• ③ 前端路由监听了到 Hash 地址的变化
• ④ 前端路由把当前 Hash 地址对应的组件渲染都浏览器中

 结论：前端路由，指的是 Hash 地址与组件之间的对应关系！

6. 实现简易的前端路由

步骤1：导入并注册 MyHome、MyMovie、MyAbout 三个组件。示例代码如下：

步骤2：通过 <component> 标签的 is 属性，动态切换要显示的组件。示例代码如下：

步骤3：在组件的结构中声明如下 3 个 <a> 链接，通过点击不同的 <a> 链接，切换浏览器地址栏中的 Hash 值：

 步骤4：在 created 生命周期函数中监听浏览器地址栏中 Hash 地址的变化，动态切换要展示的组件的名称：

 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 的官方文档地址：https://router.vuejs.org/zh/
• vue-router 4.x 的官方文档地址：https://next.router.vuejs.org/

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 声明路由链接和占位符

可以使用 <router-link> 标签来声明路由链接，并使用 <router-view> 标签来声明路由占位符。

 3.4 创建路由模块

在项目中创建 router.js 路由模块，在其中按照如下 4 个步骤创建并得到路由的实例对象：

• ① 从 vue-router 中按需导入两个方法
• ② 导入需要使用路由控制的组件
• ③ 创建路由实例对象
• ④ 向外共享路由实例对象
• ⑤ 在 main.js 中导入并挂载路由模块

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

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

 创建路由实例对象

 向外共享路由实例对象

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

 vue-router 的高级用法

1. 路由重定向

路由重定向 指的是：用户在访问 地址 A 的时候， 强制用户跳转 到地址 C ，从而展示特定的组件页面。 通过路由规则的 redirect 属性，指定一个新的路由地址，可以很方便地设置路由的重定向：

 2. 路由高亮

可以通过如下的两种方式，将 激活的路由链接 进行高亮显示：

• ① 使用