【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 }
  ]
})

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

【华为机试】2023年真题B卷（python）-解密犯罪时间

【华为机试】2023年真题B卷（python）-解密犯罪时间

一、题目 题目描述&#xff1a; 警察在侦破一个案件时&#xff0c;得到了线人给出的可能犯罪时间&#xff0c;形如 “HH:MM” 表示的时刻。 根据警察和线人的约定&#xff0c;为了隐蔽&#xff0c;该时间是修改过的&#xff0c;解密规则为&#xff1a; 利用当前出现过的数字&am…
阅读更多...
大创项目推荐 深度学习交通车辆流量分析 - 目标检测与跟踪 - python opencv

大创项目推荐 深度学习交通车辆流量分析 - 目标检测与跟踪 - python opencv

文章目录 0 前言1 课题背景2 实现效果3 DeepSORT车辆跟踪3.1 Deep SORT多目标跟踪算法3.2 算法流程 4 YOLOV5算法4.1 网络架构图4.2 输入端4.3 基准网络4.4 Neck网络4.5 Head输出层 5 最后 0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; *…
阅读更多...
基于轻量级GhostNet模型开发构建生活场景下生活垃圾图像识别系统

基于轻量级GhostNet模型开发构建生活场景下生活垃圾图像识别系统

轻量级识别模型在我们前面的博文中已经有过很多实践了&#xff0c;感兴趣的话可以自行移步阅读&#xff1a; 《移动端轻量级模型开发谁更胜一筹&#xff0c;efficientnet、mobilenetv2、mobilenetv3、ghostnet、mnasnet、shufflenetv2驾驶危险行为识别模型对比开发测试》 《基…
阅读更多...
论文阅读＜Contrastive Learning-based Robust Object Detection under Smoky Conditions＞

论文阅读＜Contrastive Learning-based Robust Object Detection under Smoky Conditions＞

论文链接&#xff1a;https://openaccess.thecvf.com/content/CVPR2022W/UG2/papers/Wu_Contrastive_Learning-Based_Robust_Object_Detection_Under_Smoky_Conditions_CVPRW_2022_paper.pdf Abstract 目标检测是指有效地找出图像中感兴趣的目标&#xff0c;然后准确地确定它们…
阅读更多...
阶段性复习（三）

阶段性复习（三）

if后面是赋值符&#xff0c;所以最后的值是a for&#xff08;&#xff1b; &#xff1b;&#xff09;是死循环 大小写转换 在这道题中&#xff0c;通过分析可知&#xff0c;在小写转换大写的过程中&#xff0c;需要满足的条件是word0&#xff0c;同时是小写&#xff0c;而在第…
阅读更多...
UV胶有缺点吗？

UV胶有缺点吗？

UV胶具有许多优势&#xff0c;有什么缺点&#xff1a; 感光性 UV胶的固化是通过紫外光照射完成的&#xff0c;因此需要确保所有焊点都能被充分照射到。 2.固化深度 UV胶的紫外线透过深度有限&#xff0c;如果需要厚度过大&#xff0c;需要分多层次涂覆后再固化。 3&#xf…
阅读更多...
【GOLANG】使用插件 Goanno 的方式来对方法、接口、结构体注释模板配置

【GOLANG】使用插件 Goanno 的方式来对方法、接口、结构体注释模板配置

直接 使用插件 Goanno 的方式来对方法、接口、结构体注释模板配置 1、简单安装 Goanno 插件 File->Settings->Plugins , 搜索 Goanno Normal Method 配置内容如下&#xff1a; // Title ${function_name} // Description ${todo} // Author mumu ${date} ${time} // Par…
阅读更多...
Vue常见面试问答

Vue常见面试问答

vue响应式数据 vue2 Vue2 的对象数据是通过 Object.defineProperty 对每个属性进行监听&#xff0c;当对属性进行读取的时候&#xff0c;就会触发 getter&#xff0c;对属性进行设置的时候&#xff0c;就会触发 setter。 /** * 这里的函数 defineReactive 用来对 Object.def…
阅读更多...
Zookeeper无法启动，报“Unable to load database on disk”

Zookeeper无法启动，报“Unable to load database on disk”

转载说明&#xff1a;如果您喜欢这篇文章并打算转载它&#xff0c;请私信作者取得授权。感谢您喜爱本文&#xff0c;请文明转载&#xff0c;谢谢。 问题描述&#xff1a; 测试环境部署zookeeper的服务器磁盘满了&#xff0c;引起服务异常&#xff0c;将zookeeper进程杀掉之后&…
阅读更多...
vscode软件安装步骤

vscode软件安装步骤

目录 一、下载软件安装包 二、运行安装包后 一、下载软件安装包 打开vscode官方网址&#xff0c;找到下载界面 链接如下&#xff1a;Download Visual Studio Code - Mac, Linux, Windows 我是windows电脑&#xff0c;各位小伙伴自己选择合适的版本&#xff0c;点击下载按钮…
阅读更多...
＜JavaEE＞ 协议格式 -- 传输层协议 TCP

＜JavaEE＞ 协议格式 -- 传输层协议 TCP

目录 一、TCP协议格式长啥样&#xff1f; 二、TCP协议属性解释 1&#xff09;源端口号/目的端口号 2&#xff09;序号/确认序号 3&#xff09;TCP报头长度 4&#xff09;保留位 5&#xff09;标志位 6&#xff09;窗口大小 7&#xff09;校验和 8&#xff09;紧急指针…
阅读更多...
56.网游逆向分析与插件开发-游戏增加自动化助手接口-通过UI分析自动药水设定功能

56.网游逆向分析与插件开发-游戏增加自动化助手接口-通过UI分析自动药水设定功能

内容来源于&#xff1a;易道云信息技术研究院VIP课 上一节内容&#xff1a;自动药水设定功能的逆向分析-CSDN博客 这次是假设没有之前的思路积累的话&#xff0c;怎样去找按钮事件。 通过ui当做切入点去做&#xff0c;就是一个窗口它显示不显示&#xff0c;游戏怎样控制这个…
阅读更多...
【unity中使用高度图创建地图】

【unity中使用高度图创建地图】

unity中使用高度图创建地图 插件 讲解案例为unity2022版本 这个是插件地址 也可以在资源商店中搜索 terrain-tools 介绍 Terrain Tools入门Terrain Tools是一个软件包&#xff0c;你可以选择将其添加到Unity 2019.1或更高版本中的任何项目中。要将该软件包添加到你的项目…
阅读更多...
2023年03月21日_chatgpt宕机事件的简单回顾

2023年03月21日_chatgpt宕机事件的简单回顾

你能想象吗 ChatGPT挂了 昨天半夜呢 来自全球各地的用户纷纷发现 ChatGPT的网站弹出了报错警告的信息 然后立即就无法使用了 即使是有特权的plus账户也未能幸免 一时之间呢 chatgptdown的话题在Twitter刷屏 不少重度的用户表示很着急 有的用户说呢没了ChatGPT 这工作…
阅读更多...
uniapp打包Android、Ios、微信小程序

uniapp打包Android、Ios、微信小程序

首先我们需要在我们的代码中&#xff0c;把我们所要用到的配置信息配置好&#xff0c;在检查一下我们测试的内容是否有打开&#xff08;取消注释&#xff09;&#xff0c;在检查一下我们的版本信息是否正确&#xff0c;查看一下接口ip是否是正式线 这里的配置信息一定要配置好…
阅读更多...
时序分解 | Matlab实现贝叶斯变化点检测与时间序列分解

时序分解 | Matlab实现贝叶斯变化点检测与时间序列分解

时序分解 | Matlab实现贝叶斯变化点检测与时间序列分解 目录 时序分解 | Matlab实现贝叶斯变化点检测与时间序列分解效果一览基本介绍程序设计参考资料 效果一览 基本介绍 Matlab实现贝叶斯变化点检测与时间序列分解 1.Matlab实现贝叶斯变化点检测与时间序列分解&#xff0c;完…
阅读更多...
产品经理学习-策略产品指标

产品经理学习-策略产品指标

目录&#xff1a; 数据指标概述 通用指标介绍 Web端常用指标 移动端常用指标 如何选择一个合适的数据指标 数据指标概述 指标是衡量目标的一个参数&#xff0c;指一项活动中预期达到的指标、目标等&#xff0c;一般用数据表示&#xff0c;因此又称为数据指标&#xff1b;…
阅读更多...
python+django在线学习教学辅助作业系统gp6yp

python+django在线学习教学辅助作业系统gp6yp

本课题使用Python语言进行开发。基于web,代码层面的操作主要在PyCharm中进行&#xff0c;将系统所使用到的表以及数据存储到MySQL数据库中 技术栈 后端&#xff1a;pythondjango 前端&#xff1a;vue.jselementui 框架&#xff1a;django/flask Python版本&#xff1a;python3.…
阅读更多...
【计算机毕业设计】python+django数码电子论坛系统设计与实现

【计算机毕业设计】python+django数码电子论坛系统设计与实现

本系统主要包括管理员和用户两个角色组成&#xff1b;主要包括&#xff1a;首页、个人中心、用户管理、分类管理、数码板块管理、数码评价管理、数码论坛管理、畅聊板块管理、系统管理等功能的管理系统。 后端&#xff1a;pythondjango 前端&#xff1a;vue.jselementui 框架&a…
阅读更多...
SpringValidation自定义注解以及分组校验

SpringValidation自定义注解以及分组校验

SpringValidation的参数校验使用可参考&#xff1a;【SpringMVC应用篇】Spring Validation 参数校验-CSDN博客 目录 1. 引入依赖 2. 自定义注解校验 2.1 创建Validation类 2.2 创建注解对象 2.3 使用注解 3. 分组校验 3.1 实体类内部定义接口 3.2 在参数上指定分组 1. …
阅读更多...
最新文章

Copyright @ 2022~2023