自学内容网 自学内容网

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)修改组件中原来的高亮类名


原文地址:https://blog.csdn.net/2301_76648183/article/details/140478205

免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!