不动产认证是哪个公司做的网站,产品开发流程介绍,安徽六安天气预报,哈尔滨网站建设网站32、路由
#xff08;1#xff09;路由的介绍
1#xff09;生活中的路由#xff1a;设备和ip的映射关系
2#xff09;路由#xff1a;一种映射关系
3#xff09;Vue中的路由#xff1a;路径与组件的映射关系
#xff08;根据路由就能知道不同的路径#xff0c;应…32、路由
1路由的介绍
1生活中的路由设备和ip的映射关系
2路由一种映射关系
3Vue中的路由路径与组件的映射关系
根据路由就能知道不同的路径应该匹配渲染哪个组件
2VueRouter介绍
1作用修改地址栏路径时切换显示匹配的组件
2步骤52
前5步固定
5个基础步骤
①下载下载VueRouter模块到当前工程版本3.6.5
npm install vue-router3.6.5
Vue2-VueRouter3.x-Vuex3.x
Vue3-VueRouter4.x-Vuex4.x ②引入 ③注册 ④创建路由对象 ⑤注入将路由对象注入到new Vue实例中建立关联 当页面由 变成 前五步完成 两个核心步骤 ①创建需要的组件views目录配置路由规则 在main.js ②配置导航配置路由出口路径匹配的组件显示的位置 配置导航 配置路由出口 3组件存放目录的问题组件分类
1src/views文件夹
页面组件-页面展示-配合路由使用
2src/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标签
1router-link的作用
①能跳转配置to属性指定路径必须。本质还是a标签加了to无需# ②能高亮默认提供高亮类名可直接设置高亮样式
③实现逻辑 变化 实现 2router-link自动添加的两个高亮类名
1router-link-active模糊匹配用的多
比如to“/my”可以匹配 /my、/my/a /my/b等等
2router-link-exact-active精确匹配
比如to“/my”仅可以匹配 /my
3示例 模糊 精确 3自定义高亮类名
1如果要自定义高亮类名可以在router中index.js的router中新增linkActiveClass模糊、linkExactActiveClass精确 2修改组件中原来的高亮类名
