vue学习day11-路由、路由模块的封装、声明式导航-路由的介绍、VueRouter、router-link、自定义高亮类名

32、路由

（1）路由的介绍

1）生活中的路由：设备和ip的映射关系

2）路由：一种映射关系

3）Vue中的路由：路径与组件的映射关系

（根据路由就能知道不同的路径，应该匹配渲染哪个组件）

（2）VueRouter介绍

1）作用：修改地址栏路径时，切换显示匹配的组件

2）步骤（5+2）

前5步固定

5个基础步骤

①下载：下载VueRouter模块到当前工程，版本3.6.5

（npm install vue-router@3.6.5）

（Vue2-VueRouter3.x-Vuex3.x）

（Vue3-VueRouter4.x-Vuex4.x）

②引入

③注册

④创建路由对象

⑤注入，将路由对象注入到new Vue实例中，建立关联

当页面由

变成

前五步完成

两个核心步骤：

①创建需要的组件（views目录），配置路由规则

在main.js

②配置导航，配置路由出口（路径匹配的组件显示的位置）

（配置导航）

（配置路由出口）

（3）组件存放目录的问题（组件分类）

1）src/views文件夹

页面组件-页面展示-配合路由使用

2）src/components文件夹

复用组件-展示数据-常用于复用

3）注意

①.vue文件分为两类，页面组件与复用组件，但本质都是.vue文件，并没有区别

②分类是因为更易维护

33、路由模块的封装（将路由模块抽离出来，拆分模块，利于维护）

（1）在src下新建一个router文件夹，再新建一个index.js文件

（2）将main.js中的与Vue有关的代码导入到index.js

（3）对index.js中的代码进行修改

（4）在main.js导入

34、声明式导航

声明式导航需求：实现导航高亮效果

Vue-router提供了一个全局组件router-link（取代a标签）

（1）router-link的作用：

①能跳转，配置to属性指定路径（必须）。本质还是a标签，加了to无需#

②能高亮，默认提供高亮类名，可直接设置高亮样式

③实现逻辑

变化：

实现：

（2）router-link自动添加的两个高亮类名

1）router-link-active（模糊匹配）（用的多）

比如：to=“/my”可以匹配 /my、/my/a   /my/b等等

2）router-link-exact-active（精确匹配）

比如：to=“/my”仅可以匹配  /my

3）示例：

模糊：

精确：

（3）自定义高亮类名

1）如果要自定义高亮类名，可以在router中index.js的router中新增linkActiveClass（模糊）、linkExactActiveClass（精确）

2）修改组件中原来的高亮类名