Vue2向Vue3过度核心技术声明式导航 本是古典 何须时尚 2024-03-24 21:49 84阅读 0赞 #### 目录 #### * * 1 声明式导航-导航链接 * * 1.需求 * 2.解决方案 * 3.通过router-link自带的两个样式进行高亮 * 4.总结 * 2 声明式导航-两个类名 * * 1.router-link-active * 2.router-link-exact-active * 3.在地址栏中输入二级路由查看类名的添加 * 4.总结 * 3 声明式导航-自定义类名 * * 1.问题 * 2.解决方案 * 3.代码演示 * 4.总结 * 4 声明式导航-查询参数传参 * * 1.目标 * 2.跳转传参 * 3.查询参数传参 * 4.代码演示 * 5 声明式导航-动态路由传参 * * 1.动态路由传参方式 * 2.查询参数传参 VS 动态路由传参 * 3.总结 * 6 动态路由参数的可选符(了解) * * 1.问题 * 2.原因 -------------------- ### 1 声明式导航-导航链接 ### ![在这里插入图片描述][758fa708a3394f3ab2868729bcd9b012.png] #### 1.需求 #### 实现导航高亮效果 ![在这里插入图片描述][987125fcacb847cc8c427fbb7a0ac3e9.png] 如果使用a标签进行跳转的话,需要给当前跳转的导航加样式,同时要移除上一个a标签的样式,太麻烦!!! #### 2.解决方案 #### vue-router 提供了一个全局组件 router-link (取代 a 标签) * **能跳转**,配置 to 属性指定路径(**必须**) 。本质还是 a 标签 ,**to 无需 \#** * **能高亮**,默认就会提供**高亮类名**,可以直接设置高亮样式 语法: 发现音乐 <div> <div class="footer_wrap"> <router-link to="/find">发现音乐</router-link> <router-link to="/my">我的音乐</router-link> <router-link to="/friend">朋友</router-link> </div> <div class="top"> <!-- 路由出口 → 匹配的组件所展示的位置 --> <router-view></router-view> </div> </div> #### 3.通过router-link自带的两个样式进行高亮 #### 使用router-link跳转后,我们发现。当前点击的链接默认加了两个class的值 `router-link-exact-active`和`router-link-active` 我们可以给任意一个class属性添加高亮样式即可实现功能 #### 4.总结 #### * router-link是什么? * router-link怎么用? * router-link的好处是什么? ### 2 声明式导航-两个类名 ### 当我们使用跳转时,自动给当前导航加了**两个类名** ![在这里插入图片描述][4a3c54443b1944eba1d8d73e3d3a1926.png] #### 1.router-link-active #### **模糊匹配(用的多)** to=“/my” 可以匹配 /my /my/a /my/b … 只要是以/my开头的路径 都可以和 to="/my"匹配到 #### 2.router-link-exact-active #### **精确匹配** to=“/my” 仅可以匹配 /my #### 3.在地址栏中输入二级路由查看类名的添加 #### #### 4.总结 #### * router-link 会自动给当前导航添加两个类名,有什么区别呢? ### 3 声明式导航-自定义类名 ### #### 1.问题 #### router-link的**两个高亮类名 太长了**,我们希望能定制怎么办 ![在这里插入图片描述][eae7cdbd6c194518bdd5ac8ad80ad2b0.png] #### 2.解决方案 #### 我们可以在创建路由对象时,额外配置两个配置项即可。 `linkActiveClass`和`linkExactActiveClass` const router = new VueRouter({ routes: [...], linkActiveClass: "类名1", linkExactActiveClass: "类名2" }) ![在这里插入图片描述][ea2ff0a8b6e24f78bf9d45c60d23395a.png] #### 3.代码演示 #### // 创建了一个路由对象 const router = new VueRouter({ routes: [ ... ], linkActiveClass: 'active', // 配置模糊匹配的类名 linkExactActiveClass: 'exact-active' // 配置精确匹配的类名 }) #### 4.总结 #### 如何自定义router-link的两个**高亮类名** ### 4 声明式导航-查询参数传参 ### #### 1.目标 #### 在跳转路由时,进行传参 ![在这里插入图片描述][91a092a28eea402b9358058e1c11db7a.png] 比如:现在我们在搜索页点击了热门搜索链接,跳转到详情页,**需要把点击的内容带到详情页**,改怎么办呢? #### 2.跳转传参 #### 我们可以通过两种方式,在跳转的时候把所需要的参数传到其他页面中 * 查询参数传参 * 动态路由传参 #### 3.查询参数传参 #### * 如何传参? * 如何接受参数 固定用法:$router.query.参数名 #### 4.代码演示 #### App.vue <template> <div id="app"> <div class="link"> <router-link to="/home">首页</router-link> <router-link to="/search">搜索页</router-link> </div> <router-view></router-view> </div> </template> <script> export default {}; </script> <style scoped> .link { height: 50px; line-height: 50px; background-color: #495150; display: flex; margin: -8px -8px 0 -8px; margin-bottom: 50px; } .link a { display: block; text-decoration: none; background-color: #ad2a26; width: 100px; text-align: center; margin-right: 5px; color: #fff; border-radius: 5px; } </style> Home.vue <template> <div class="home"> <div class="logo-box"></div> <div class="search-box"> <input type="text"> <button>搜索一下</button> </div> <div class="hot-link"> 热门搜索: <router-link to="">黑马程序员</router-link> <router-link to="">前端培训</router-link> <router-link to="">如何成为前端大牛</router-link> </div> </div> </template> <script> export default { name: 'FindMusic' } </script> <style> .logo-box { height: 150px; background: url('@/assets/logo.jpeg') no-repeat center; } .search-box { display: flex; justify-content: center; } .search-box input { width: 400px; height: 30px; line-height: 30px; border: 2px solid #c4c7ce; border-radius: 4px 0 0 4px; outline: none; } .search-box input:focus { border: 2px solid #ad2a26; } .search-box button { width: 100px; height: 36px; border: none; background-color: #ad2a26; color: #fff; position: relative; left: -2px; border-radius: 0 4px 4px 0; } .hot-link { width: 508px; height: 60px; line-height: 60px; margin: 0 auto; } .hot-link a { margin: 0 5px; } </style> Search.vue <template> <div class="search"> <p>搜索关键字: 黑马程序员</p> <p>搜索结果: </p> <ul> <li>.............</li> <li>.............</li> <li>.............</li> <li>.............</li> </ul> </div> </template> <script> export default { name: 'MyFriend', created () { // 在created中,获取路由参数 } } </script> <style> .search { width: 400px; height: 240px; padding: 0 20px; margin: 0 auto; border: 2px solid #c4c7ce; border-radius: 5px; } </style> router/index.js import Home from '@/views/Home' import Search from '@/views/Search' import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) // VueRouter插件初始化 // 创建了一个路由对象 const router = new VueRouter({ routes: [ { path: '/home', component: Home }, { path: '/search', component: Search } ] }) export default router main.js ... import router from './router/index' ... new Vue({ render: h => h(App), router }).$mount('#app') ### 5 声明式导航-动态路由传参 ### #### 1.动态路由传参方式 #### * 配置动态路由 > 动态路由后面的参数可以随便起名,但要有语义 const router = new VueRouter({ routes: [ ..., { path: '/search/:words', component: Search } ] }) * 配置导航链接 to=“/path/参数值” * 对应页面组件**接受参数** $route.**params**.参数名 > params后面的参数名要和动态路由配置的参数保持一致 #### 2.查询参数传参 VS 动态路由传参 #### 1. 查询参数传参 (比较适合传**多个参数**) 1. 跳转:to=“/path?参数名=值&参数名2=值” 2. 获取:$route.query.参数名 2. 动态路由传参 (**优雅简洁**,传单个参数比较方便) 1. 配置动态路由:path: “/path/:参数名” 2. 跳转:to=“/path/参数值” 3. 获取:$route.params.参数名 注意:动态路由也可以传多个参数,但一般只传一个 #### 3.总结 #### 声明式导航跳转时, 有几种方式传值给路由页面? * 查询参数传参(多个参数) * 动态路由传参(一个参数,优雅简洁) ### 6 动态路由参数的可选符(了解) ### #### 1.问题 #### 配了路由 path:“/search/:words” 为什么按下面步骤操作,会未匹配到组件,显示空白? ![在这里插入图片描述][b86d427e74e74e7eba56a53907697124.png] #### 2.原因 #### /search/:words 表示,**必须要传参数**。如果不传参数,也希望匹配,可以加个可选符"?" const router = new VueRouter({ routes: [ ... { path: '/search/:words?', component: Search } ] }) [758fa708a3394f3ab2868729bcd9b012.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/7fafb9ec8d374bb28ca64d0efb3cbe34.png [987125fcacb847cc8c427fbb7a0ac3e9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/fb6962e74ef94fca9239bccf6377a7ee.png [4a3c54443b1944eba1d8d73e3d3a1926.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/9eceebeb577b48c6baa8eb837784a048.png [eae7cdbd6c194518bdd5ac8ad80ad2b0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/33a245cf430a45f9a4ba23c2f4213ae6.png [ea2ff0a8b6e24f78bf9d45c60d23395a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/23b25f450c5f4947b9e4fb01fd1d65b0.png [91a092a28eea402b9358058e1c11db7a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/e49c696c1c0445129e2afbeb27161b43.png [b86d427e74e74e7eba56a53907697124.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/13/01b0d85a848844dd86078bb5d21cb992.png
相关 Vue2向Vue3过度核心技术综合案例 目录 1 面经基础版-案例效果分析 1.面经效果演示 2.功能分析 3.实现思路分析:配置路由 曾经终败给现在/ 2024年03月24日 21:50/ 0 赞/ 95 阅读
相关 Vue2向Vue3过度核心技术声明式导航 目录 1 声明式导航-导航链接 1.需求 2.解决方案 3.通过router-link自带的两 本是古典 何须时尚/ 2024年03月24日 21:49/ 0 赞/ 85 阅读
相关 Vue2向Vue3过度核心技术插槽 目录 1 插槽-默认插槽 1.作用 2.需求 3.问题 4.插槽的基本语 Love The Way You Lie/ 2024年03月24日 21:48/ 0 赞/ 84 阅读
相关 Vue2向Vue3过度核心技术组件通信 目录 1 组件基础知识scoped解决样式冲突 1.1 默认情况: 1.2 代码演示 1.3 浅浅的花香味﹌/ 2024年03月24日 21:37/ 0 赞/ 90 阅读
相关 Vue2向Vue3过度核心技术生命周期 目录 1 Vue生命周期 2 Vue生命周期钩子 3 生命周期钩子小案例 1.1 在created中发送数据 小灰灰/ 2024年03月24日 21:35/ 0 赞/ 83 阅读
相关 Vue2向Vue3过度核心技术watch侦听器 目录 1 watch侦听器 1.1 作用: 1.2 语法: 1.3 侦听器代码准备 以你之姓@/ 2024年03月24日 21:33/ 0 赞/ 59 阅读
还没有评论,来说两句吧...