vue路由从入门到进阶

2024-07-09 09:48| 来源: 网络整理| 查看: 265

本文讲解vue路由的【声明式导航（router-link）】【导航高亮】【精确匹配&模糊匹配】【自定义高亮类名】【声明式导航传参 ( 查询参数传参 & 动态路由传参 )】等内容，并结合具体案例让小伙伴们深入理解，彻底掌握！创作不易，需要的小伙伴关注+收藏哦~❣️

💟 上一篇文章 vue路由的基础知识总结，vueRouter插件的安装与使用（热榜前十）

📝 系列专栏 vue从基础到起飞

声明：图片资源部分来自于黑马程序员公开学习资料本人在过去的学习当中，详细整理了笔记，供大家参考学习

一、声明式导航-导航链接

1.需求

2.解决方案

3.通过router-link自带的两个样式进行高亮

二、声明式导航-两个类名

1.router-link-active

2.router-link-exact-active

三、声明式导航-自定义类名

1.问题

2.解决方案

3.代码演示

四、声明式导航-查询参数传参

1.目标

2.跳转传参

3.查询参数传参

4.代码演示

五、声明式导航-动态路由传参

1.动态路由传参方式

2.查询参数传参 VS 动态路由传参

六、动态路由参数的可选符(了解)

1.问题

2.原因

一、声明式导航-导航链接 1.需求

实现导航高亮效果

如果使用a标签进行跳转的话，需要给当前跳转的导航加样式，同时要移除上一个a标签的样式，太麻烦！！！

2.解决方案

vue-router 提供了一个全局组件 router-link (取代 a 标签)

能跳转，配置 to 属性指定路径(必须) 。本质还是 a 标签，to 无需 #

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

语法：发现音乐

发现音乐我的音乐朋友 3.通过router-link自带的两个样式进行高亮

使用router-link跳转后，我们发现。当前点击的链接默认加了两个class的值 router-link-exact-active和router-link-active

我们可以给任意一个class属性添加高亮样式即可实现功能

二、声明式导航-两个类名

当我们使用跳转时，自动给当前导航加了两个类名

1.router-link-active

模糊匹配（用的多）

to="/my" 可以匹配 /my /my/a /my/b ....

只要是以/my开头的路径都可以和 to="/my"匹配到

2.router-link-exact-active

精确匹配

to="/my" 仅可以匹配 /my

三、声明式导航-自定义类名 1.问题

router-link的两个高亮类名太长了，我们希望能定制怎么办

2.解决方案

我们可以在创建路由对象时，额外配置两个配置项即可。 linkActiveClass和linkExactActiveClass

const router = new VueRouter({ routes: [...], linkActiveClass: "类名1", linkExactActiveClass: "类名2" })

3.代码演示 // 创建了一个路由对象 const router = new VueRouter({ routes: [ ... ], linkActiveClass: 'active', // 配置模糊匹配的类名 linkExactActiveClass: 'exact-active' // 配置精确匹配的类名 })

四、声明式导航-查询参数传参 1.目标

在跳转路由时，进行传参

比如：现在我们在搜索页点击了热门搜索链接，跳转到详情页，需要把点击的内容带到详情页，改怎么办呢？

2.跳转传参

我们可以通过两种方式，在跳转的时候把所需要的参数传到其他页面中

查询参数传参

动态路由传参

3.查询参数传参

如何传参？

如何接受参数

固定用法：$router.query.参数名

4.代码演示

App.vue

首页搜索页 export default {}; .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; }

Home.vue

搜索一下热门搜索：黑马程序员前端培训如何成为前端大牛 export default { name: 'FindMusic' } .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; }

Search.vue

搜索关键字: {{ $route.query.key }}

搜索结果:

............. ............. ............. ............. export default { name: 'MyFriend', created () { // 在created中，获取路由参数 // this.$route.query.参数名获取 console.log(this.$route.query.key); } } .search { width: 400px; height: 240px; padding: 0 20px; margin: 0 auto; border: 2px solid #c4c7ce; border-radius: 5px; }

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 Vue from 'vue' import App from './App.vue' import router from './router/index' Vue.config.productionTip = false new Vue({ render: h => h(App), router }).$mount('#app')

五、声明式导航-动态路由传参 1.动态路由传参方式

配置动态路由

动态路由后面的参数可以随便起名，但要有语义

const router = new VueRouter({ routes: [ ..., { path: '/search/:words', component: Search } ] })

配置导航链接

to="/path/参数值"

对应页面组件接受参数

$route.params.参数名

params后面的参数名要和动态路由配置的参数保持一致

2.查询参数传参 VS 动态路由传参

查询参数传参 (比较适合传多个参数)

跳转：to="/path?参数名=值&参数名2=值"

获取：$route.query.参数名

动态路由传参 (优雅简洁，传单个参数比较方便)

配置动态路由：path: "/path/:参数名"

跳转：to="/path/参数值"

获取：$route.params.参数名

注意：动态路由也可以传多个参数，但一般只传一个

六、动态路由参数的可选符(了解) 1.问题

配了路由 path:"/search/:words" 为什么按下面步骤操作，会未匹配到组件，显示空白？

2.原因

/search/:words 表示，必须要传参数。如果不传参数，也希望匹配，可以加个可选符"？"

const router = new VueRouter({ routes: [ ... { path: '/search/:words?', component: Search } ] })

🚀 个人简介：6年开发经验，现任职某国企前端负责人，分享前端相关技术与工作常见问题~ 💟 作者：前端菜鸟的自我修养❣️ 📝 专栏：vue从基础到起飞 🌈 若有帮助，还请关注➕点赞➕收藏，不行的话我再努努力💪💪💪

更多专栏订阅推荐：

👍 前端工程搭建 💕 JavaScript深入研究

📝 前端工作常见问题汇总

下一篇讲解【路由404问题】【路由模式设置】【路由重定向】~

【本文地址】

vue路由从入门到进阶

vue路由从入门到进阶

今日新闻

推荐新闻