【Vue】- 路由及传参

文章目录

  • 知识回顾
  • 前言
  • 源码分析
    • 1. 声明式导航
    • 2. 路由传参
    • 3. 可选符
    • 4. 重定向
    • 5. 404
    • 6. 跳转及传参
    • 7. 路由懒加载
  • 拓展知识
  • 总结
        • router-link
        • 静态传参和动态路由的对比


知识回顾

前言

在这里插入图片描述

什么是单页面应用程序?
● 所有功能在一个html页面上实现
单页面应用优缺点?
● 优点:按需更新性能高,开发效率高,用户体验好
● 缺点:学习成本,首屏加载慢,不利于SEO
应用场景?
● 系统类网站 / 内部网站 / 文档类网站 /移动端站点

什么是路由?
○ 路由是一种映射关系
Vue中的路由是什么?
○ 路径和组件 的映射关系
○ 根据路由就能知道不同路径的,应该匹配渲染哪个组件

如何实现路径改变,对应组件切换,应该使用哪个插件?
○ Vue 官方插件 VueRouter
Vue-Router的使用步骤是什么?
○ 下载vue-router —> 创建路由器实例 —> 注册路由器插件
○ 创建需要的组件 (views目录),配置路由规则 —> 配置导航,配置路由出口


源码分析

1. 声明式导航

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>

2. 路由传参

普通传参

<router-link to="/path?参数名=值"></router-link>
● 如何接受参数固定用法:$route.query.参数名
<script setup lang="ts"></script><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="/search?keyword=苹果">apple</router-link><router-link to="/search?keyword=橙子">orange</router-link><router-link to="/search?keyword=香蕉">blanana</router-link></div></div><div class="top"><router-view></router-view></div

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

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

相关文章

大模型时代的 AI 产品经理何去何从?

每天 LLM 相关的资讯都让人过载。作为 AI 产品经理&#xff0c;你是更兴奋呢&#xff0c;还是更担忧呢&#xff1f;整理了一下个人近期的思考&#xff0c;欢迎感兴趣的朋友一起交流。不管答案如何&#xff0c;相信我们都不应置身事外。 1 关于大模型‍‍ 大模型的各种原理讲…

OpenAI O1热度己过-如此快速的冷场带来的是人们更多对现今“AI”的思考

引入o1的瞬间辉煌 o1如耀眼的新星&#xff0c;闪耀于科技天空。发布时&#xff0c;因其思考能力而备受瞩目。它能在回答问题之前进行更多的思考&#xff0c;尤其擅长复杂推理。这种能力引发了众多用户的好奇与热情。诸如“9.8和9.11哪个大&#xff1f;”的简单问题被广泛地验证…

上海人工智能实验室开源视频生成模型Vchitect 2.0 可生成20秒高清视频

上海人工智能实验室日前推出的Vchitect2.0视频生成模型正在悄然改变视频创作的游戏规则。这款尖端AI工具不仅简化了视频制作流程&#xff0c;还为创作者提供了前所未有的灵活性和高质量输出。 Vchitect2.0的核心优势在于其强大的生成能力和高度的可定制性。用户只需输入文字描…

Java获取随机数

在Java中获取随机数通常会使用java.util.Random类或者Math.random()方法 1.java.util.Random java.util.Random类用于生成伪随机数。 // 使用无参构造方法创建Random对象Random rand new Random();// 生成一个[0, 100)范围内的随机整数int randomInt rand.nextInt(100);Sys…

算法练习题26——多项式输出(模拟)

输入格式 输入共有 2 行 第一行 1 个整数&#xff0c;n&#xff0c;表示一元多项式的次数。 第二行有 n1 个整数&#xff0c;其中第 i 个整数表示第 n−i1 次项的系数&#xff0c;每两个整数之间用空格隔开。 输出格式 输出共 1 行&#xff0c;按题目所述格式输出多项式。…

【ARM】中断的处理

ARM的异常向量表 如果发生异常后并没有exception level切换&#xff0c;并且发生异常之 前使用的栈指针是SP_EL0&#xff0c;那么使用第一组异常向量表。如果发生异常后并没有exception level切换&#xff0c;并且发生异常之 前使用的栈指针是SP_EL1/2/3&#xff0c;那么使用第…

雷朋太阳镜和AEG的制胜法宝是:音乐节以及数据驱动的品牌推广

图片来源&#xff1a;Photo by Ethan Robertson on Unsplash 几十年来&#xff0c;我们见证了流行文化偶像对大众的影响。雷朋一直是一个深受偶像和大众喜爱的品牌。借助这股浪潮&#xff0c;雷朋与全球最大的娱乐公司之一AEG合作&#xff0c;吸引消费者&#xff0c;并以沉浸式…

JAVA-集合相关

HashMap如何解决哈希冲突的&#xff1f; 计算hash值&#xff0c;基于hashCode计算冲突之后&#xff0c;先是使用链式寻址法当链表长度大于8&#xff0c;且hash表的容量大于60的时候&#xff0c;再添加元素则转化成红黑树 为什么计算hash值是&#xff0c;是将hash地址的值右移1…

推荐10款最佳的电脑监控软件,知名电脑监控软件推荐

随着互联网和科技的飞速发展&#xff0c;电脑监控软件成为企业和个人用户管理和保护信息安全的必备工具。这些软件可以帮助你实时了解电脑的使用情况、保护隐私、优化工作效率&#xff0c;甚至防止潜在的安全威胁。在这篇文章中&#xff0c;我们将为你推荐10款最佳的电脑监控软…

k8s的搭建

一、安装环境 准备三台主机&#xff1a; 192.168.1.66 k8s-master 192.168.1.77 k8s-node01 192.168.1.88 k8s-node02 网段&#xff1a; Pod ⽹段 172.16.0.0/16 Service ⽹段 10.96.0.0/16 注&#xff1a;宿主机⽹段、Pod…

乱弹篇(52)旁观者说

众所周知&#xff0c;地球人都晓得“股市是经济的晴雨表”这个定律&#xff0c;那么中秋节后的中国内地股市&#xff0c;为何在节后的9月18日首个交易日&#xff0c;上证指数仍继续下行&#xff0c;盘中还一度跌破2700点创7个多月以来新低&#xff0c;整体市场数千个股下跌呢&a…

c#进度条实现方法

在使用c#做WinFrom开发时&#xff0c;经常会用到进度条&#xff08;ProgressBar&#xff09;。那么如何才能实现winfrom进度条及进度信息提示呢&#xff1f; 方法一&#xff1a;多线程 使用c#做WinFrom开发&#xff0c;要实现进度条效果就需要用到多线程&#xff0c;如果不采…

CH1-2 误差分析

一、误差的概念 用计算机进行实际问题的数值计算时&#xff0c;往往求得的是问题的近似解&#xff0c;都存在误差。 模型误差&#xff1a;在建立数学模型过程中&#xff0c;要将复杂的现象抽象归结为数学模型&#xff0c;往往要忽略一些次要因素的影响,而对问题作一些简化&am…

Nginx越界读取缓存漏洞(CVE-2017-7529)

漏洞原理&#xff1a; 影响版本内默认配置模块的Nginx只需要开启缓存&#xff0c;攻击者可以通过发送包含恶意构造range域的header请求进行远程攻击造成信息泄露。 影响范围&#xff1a; Nginx 0.5.6 – 1.13.2 漏洞复现&#xff1a; 开启靶场&#xff0c;访问8080端口 中间…

数据处理与统计分析篇-day05-Pandas详解

创建DaraFrame对象 概述 DataFrame是一个表格型的结构化数据结构&#xff0c;它含有一组或多组有序的列&#xff08;Series&#xff09;&#xff0c;每列可以是不同的值类型&#xff08;数值、字符串、布尔值等&#xff09;。 DataFrame是Pandas中的最基本的数据结构对象&…

如何使用下拉字段创建WordPress表单(简单方法)

许多网站所有者在收集用户输入时&#xff0c;都会因为表单过长而让用户感到压迫。 下拉列表字段通过提供一个简洁的选项列表&#xff0c;使表单变得更简单。这意味着它们可以提高表单完成率&#xff0c;并改善用户体验。 在本文中&#xff0c;我们将向您展示如何创建带有下拉…

Vue安装及环境配置【图解版】

欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 Facts speak louder than words&#xff01; 目录 一.node.js的安装…

平替WordPress/Zendesk,3分钟零代码用HelpLook建立一个企业网站

您是否正寻找一个能同时接入网站、小程序、App的内容管理系统&#xff1f;是否希望无需后端技能也能轻松接入&#xff0c;且无需搭建服务器&#xff1f;尤其是有出海需求的企业&#xff0c;希望搭建一个国内外访问速度都快而稳定的在线帮助中心&#xff1f; 企业对于在线内容管…

YOLOv9改进策略【卷积层】| HWD,引入`Haar小波变换`到下采样模块中,减少信息丢失

一、本文介绍 本文记录的是利用Haar小波下采样对YOLOv9网络进行改进的方法研究。传统的卷积神经网络中常用的最大池化、平均池化和步长为2的卷积等操作进行下采样可能会导致信息丢失&#xff0c;为了解决信息丢失问题&#xff0c;HWD作者受无损信息变换方法的启发&#xff0c;…

算法知识点———并查集

并查集是一种用于管理元素所属集合的数据结构&#xff0c;实现为一个森林&#xff0c;其中每棵树表示一个集合&#xff0c;树中的节点表示对应集合中的元素。并查集支持两种操作&#xff1a; 合并&#xff08;Union&#xff09;&#xff1a;合并两个元素所属集合&#xff08;合…