Vue2 零基础入门 Vue2 零基础入门第六天 6.1 前端路由的概念与原理 && 6.2 vue-router的基本使用

Vue2 零基础入门

Vue2 零基础入门第六天

老师：黑马程序员

6. 路由

6.1 前端路由的概念与原理

6.1.1 什么是路由

路由（英文：router）就是对应关系。

6.1.2 SPA与前端路由

SPA 指的是一个 web 网站只有唯一的一个 HTML 页面，所有组件的展示与切换都在这唯一的一个页面内完成。

此时，不同组件之间的切换需要通过前端路由来实现。

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

6.1.3 什么是前端路由

Hash 地址与组件之间的对应关系。

6.1.4 前端路由的工作方式

① 用户点击了页面上的路由链接

② 导致了 URL 地址栏中的 Hash 值发生了变化

③ 前端路由监听了到 Hash 地址的变化

④ 前端路由把当前 Hash 地址对应的组件渲染都浏览器中

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

6.1.5 实现简易的前端路由

【1. 通过标签，结合comName动态渲染组件】

【2. 在App.vue组件中，为添加对应的hash值】

【3. 在created生命周期函数中，监听浏览器地址中hash地址的变化，动态切换要展现的组件的名称】

6.2 vue-router的基本使用

6.2.1 什么是vue-router

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

vue-router 的官方文档地址：https://router.vuejs.org/zh/

6.2.2 vue-router安装和配置的步骤

① 安装 vue-router 包

//vue2项目
npm i vue-router@3.5.2 -S
1
2

② 创建路由模块

在 src 源代码目录下，新建 router/index.js 路由模块，并初始化如下的代码

③ 导入并挂载路由模块

在 src/main.js 入口文件中，导入并挂载路由模块。

④ 声明路由链接和占位符

在 src/App.vue 组件中，使用 vue-router 提供的 和 声明路由链接和占位符

6.2.3 声明路由的匹配规则

在 src/router/index.js 路由模块中，通过 routes 数组声明路由的匹配规则。