【Vue2+3入门到实战】（15）VUE路由入门声明式导航的基本使用与详细代码示例

目录

    • 一、声明式导航-导航链接
      • 1.需求
      • 2.解决方案
      • 3.通过router-link自带的两个样式进行高亮
      • 4.总结
    • 二、声明式导航-两个类名
      • 1.router-link-active
      • 2.router-link-exact-active
      • 3.在地址栏中输入二级路由查看类名的添加
      • 4.总结
    • 三、声明式导航-自定义类名（了解）
      • 1.问题
      • 2.解决方案
      • 3.代码演示
      • 4.总结
    • 四、声明式导航-查询参数传参
      • 1.目标
      • 2.跳转传参
      • 3.查询参数传参
      • 4.代码演示
    • 五、声明式导航-动态路由传参
      • 1.动态路由传参方式
      • 2.查询参数传参 VS 动态路由传参
      • 3.总结
    • 六、动态路由参数的可选符(了解)
      • 1.问题
      • 2.原因

在这里插入图片描述

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

1.需求

实现导航高亮效果

在这里插入图片描述

如果使用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的好处是什么？

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

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

在这里插入图片描述

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 会自动给当前导航添加两个类名，有什么区别呢？

三、声明式导航-自定义类名（了解）

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' // 配置精确匹配的类名
})

4.总结

如何自定义router-link的两个高亮类名

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

1.目标

在跳转路由时，进行传参

在这里插入图片描述

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

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')

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

1.动态路由传参方式

  • 配置动态路由

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

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

  • 配置导航链接

    to=“/path/参数值”

  • 对应页面组件接受参数

    $route.params.参数名

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

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

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

  2. 跳转：to=“/path?参数名=值&参数名2=值”

  3. 获取：$route.query.参数名

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

    1. 配置动态路由：path: “/path/:参数名”
    2. 跳转：to=“/path/参数值”
    3. 获取：$route.params.参数名

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

3.总结

声明式导航跳转时, 有几种方式传值给路由页面？

  • 查询参数传参（多个参数）
  • 动态路由传参（一个参数，优雅简洁）

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

1.问题

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

在这里插入图片描述

2.原因

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

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/311115.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

JavaWeb乱七八糟的报错及其原因和解决办法（持续更新中。。。）

JavaWeb乱七八糟的报错及其原因和解决办法（持续更新中。。。）

报错&#xff1a; com.mysql.cj.jdbc.exceptions.CommunicationsException: Communications link failureThe last packet sent successfully to the server was 0 milliseconds ago. The driver has not received any packets from the server.原因&#xff1a;MySQL服务关闭…
阅读更多...
Elasticsearch-8.11.1 （2+1）HA（高可用）集群部署

Elasticsearch-8.11.1 （2+1）HA（高可用）集群部署

目录 一、环境描述 二、安装 ES 2.1 下载Elasticsearch 2.2 解压Elasticsearch 2.3 创建es服务账号/密码 2.3 修改服务器配置 2.4 配置节点 2.4.1 配置说明 2.4.2 配置高可用集群 2.4.2.1 maser节点服务配置 2.4.2.2 node1 节点服务配置 2.4.2.3 node2 节点服务配置…
阅读更多...
mysql间隙锁demo分析

mysql间隙锁demo分析

概述 通常用的mysql都是innodb引擎&#xff1b; 一般在update的时候用id都会认为是给行记录加锁&#xff1b; 在使用非唯一索引更新时&#xff0c;会遇到临键锁&#xff08;范围锁&#xff09;&#xff1b; 临键锁和表中的数据有关&#xff1b; mysq版本:8 隔离级别&#xf…
阅读更多...
混凝土支撑模板的安装技巧有哪些？

混凝土支撑模板的安装技巧有哪些？

在建筑工程中&#xff0c;混凝土支撑模板的正确安装对于确保结构的安全和工程的顺利进行至关重要。以下是一些实用的安装技巧&#xff0c;可以帮助施工人员更有效地安装混凝土支撑模板&#xff1a; 1. 熟悉设计和施工图纸 在安装前&#xff0c;彻底熟悉设计和施工图纸是非常重…
阅读更多...
精致旅游网ROXANDREA 网页设计 html模板

精致旅游网ROXANDREA 网页设计 html模板

一、需求分析 旅游网站通常具有多种功能&#xff0c;以下是一些常见的旅游网站功能&#xff1a; 酒店预订&#xff1a;旅游网站可以提供酒店预订服务&#xff0c;让用户搜索并预订符合其需求和预算的酒店房间。 机票预订&#xff1a;用户可以通过旅游网站搜索、比较和预订机票…
阅读更多...
基于EPICS modbus模块的一通道电压监测项目

基于EPICS modbus模块的一通道电压监测项目

先介绍在本项目中使用到的硬件&#xff1a; 1&#xff09;开发板&#xff1a;为香橙派Zero2&#xff0c;安装系统如下&#xff1a; Distributor ID: Ubuntu Description: Ubuntu 22.04.2 LTS Release: 22.04 Codename: jammy 2&#xff09; USB转485模块&…
阅读更多...
AJAX: 整理2：学习原生的AJAX，这边借助express框架

AJAX: 整理2：学习原生的AJAX，这边借助express框架

1. npm install express 终端直接安装 2. 测试案例&#xff1a;Hello World&#xff01; 新建一个express.js的文件&#xff0c;写入下方的内容 // 1. 引入express const express require(express)// 2. 创建服务器 const app express()// 3.创建路由规则 // request 是对请…
阅读更多...
蓝桥杯真题位运算

蓝桥杯真题位运算

位运算:对二进制进行操作的运算方式 与运算:有0得0 或运算:有1得1 异或运算:相同为0、不同为1取反 左移、右移 与运算&:有0则为0&#xff0c;全1为1 或运算|:有1则为1&#xff0c;全0为0 异或运算^:相同为0、不同为1 交换律: x^yy ^x 结合律: x ^(y ^z)(x ^y)^z …
阅读更多...
《微信小程序开发从入门到实战》学习六十七

《微信小程序开发从入门到实战》学习六十七

6.6 网络API 部分小程序服务端不是用云开发技术实现&#xff0c;而是由开发人员使用后端开发语言实现。 在小程序用网络API与&#xff08;开发人员使后端开发语言建设的&#xff09;服务端进行交互&#xff0c;可与服务端交换数据、上传或下载文件。 6.6.1 服务器域名配置 …
阅读更多...
Langchain-Chatchat开源库使用的随笔记（一）

Langchain-Chatchat开源库使用的随笔记（一）

笔者最近在研究Langchain-Chatchat&#xff0c;所以本篇作为随笔记进行记录。 最近核心探索的是知识库的使用&#xff0c;其中关于文档如何进行分块的详细&#xff0c;可以参考笔者的另几篇文章&#xff1a; 大模型RAG 场景、数据、应用难点与解决&#xff08;四&#xff09;R…
阅读更多...
Termius for Mac/Win：一站式终端模拟器、SSH 和 SFTP 客户端软件的卓越选择

Termius for Mac/Win：一站式终端模拟器、SSH 和 SFTP 客户端软件的卓越选择

随着远程工作和云技术的普及&#xff0c;对于高效安全的远程访问和管理服务器变得至关重要。Termius&#xff0c;一款强大且易用的终端模拟器、SSH 和 SFTP 客户端软件&#xff0c;正是满足这一需求的理想选择。 Termius 提供了一站式的解决方案&#xff0c;允许用户通过单一平…
阅读更多...
华清远见作业第十六天

华清远见作业第十六天

思维导图&#xff1a; 双向循环链表头插入&#xff1a; 代码&#xff1a; Doublelist insert_head(Doublelist head,datatype element) {//创建新节点sDoublelist screate_node();if(NULLs){return head;}s->dataelement;//数据存储//判断链表是否为空if(NULLhead){heads;…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023