路由的基本

news2024/11/17 1:38:26

目录

一、VueRouter介绍

二、VueRouter的使用

三、注意


一、VueRouter介绍

VueRouter是Vue官方的一个路由插件,是一个第三方包。

作用:修改地址栏路径时,切换显示匹配的组件

官网:Vue Router (vuejs.org)

二、VueRouter的使用

注意:如果是通过npm创建的Vue项目,则第一步下载的yarn add应改为npm install

而后四步都是在main.js中进行配置。

<router-view>标签用来控制组件展示的位置。

三、注意

组件的名字应该是由多个单词组成的,如果创建的时候用一个单词命名,则在为组件配置路由时会报错,此时可以设置组件的name属性,把它改成多单词,这样就可以正常配置路由了。

比如Find.vue组件,把它的name属性改为:FindMusic。

然后配置路由的时候,要导入Find组件,依然使用 import Find from ..........。即使name属性改成了FindMusic,在导入的时候,依然可以命名为Find。总的来说,就是导入的时候可以随便命名(满足命名规则),不需要跟组件的name属性值一致。

一般来讲,组件的name属性值默认与.vue文件的名字一样。如果说不小心创建了只有一个单词的.vue文件,可以通过自定义name属性来调整,以满足多单词规则,因为一个单词的.vue文件在配置路由的时候会报错。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

ABUMN_公司内资产转移

ABUMN_公司内资产转移 一、功能介绍 使用事务码ABUMN进行公司内资产转移 二、程序代码 程序代码&#xff1a; *&---------------------------------------------------------------------* *& Report ZFIR218 *&---------------------------------------------…

如何确保UDP文件传输工具有最低稳定的传输速度?

在当前日新月异的数字时代背景下&#xff0c;文件传输工具已经成为我们日常生活与工作中不可或缺的一部分&#xff0c;尤其针对那些频繁涉及即时数据交互与多媒体流通的场景。 UDP协议&#xff0c;以其突出的高速传输与低延迟特性&#xff0c;脱颖而出成为众多用户的首选。不过…

通过自适应提示提升大语言模型的零样本推理能力

随着大模型&#xff08;LLMs&#xff09;的快速发展&#xff0c;它们在自然语言处理&#xff08;NLP&#xff09;任务上取得了前所未有的成就。特别是&#xff0c;LLMs展现出了强大的推理和规划能力&#xff0c;这得益于它们的少样本和零样本学习能力。然而&#xff0c;现有的方…

校验--ECC详细分析

ECC介绍 ECC 以下是针对瑞萨MCU的应用的ECC检测的详细分析。 当前公认安全有效的三大类公钥密钥体制分别为基于大数因子分解难题(RSA)、离散对数难题(DSA)和椭圆曲线离散对数&#xff08;ECC&#xff09;难题的密码体制。 保证RSA的安全性&#xff0c;则必须要增加密钥长度…

影响视频视觉质量的因素——各类视觉伪影

模糊效应&#xff08;Blurring Artifact&#xff09; 图像模糊&#xff08;blurring&#xff09;&#xff1a;平滑图像的细节和边缘产生的现象&#xff0c;模糊对于图像来说&#xff0c;是一个低通滤波器&#xff08;low-pass filter&#xff09;。一般而言&#xff0c;用户更…

Layer1 公链竞争破局者:Sui 生态的全面创新之路

随着 Sui 生态逐渐在全球范围内树立起声望&#xff0c;并通过与 Revolut 等前沿金融科技平台合作&#xff0c;推广区块链教育与应用&#xff0c;Sui 生态的未来发展方向已成为业界瞩目的焦点。如今&#xff0c;Sui 的总锁定价值已攀升至 5.93 亿美元&#xff0c;充分展示了其在…

python如何整体缩进

python自带编辑器的缩进和取消缩进快捷键&#xff1a; 整体缩进 Ctrl【 整体取消缩进 Ctrl】 pycharm编辑器的缩进和取消缩进快捷键&#xff1a; 整体缩进&#xff1a; tab 整体取消缩进&#xff1a; tabshift

【ZIP技巧】ZIP分卷压缩包如何解压?

经过压缩的文件仍然过大&#xff0c;大家可能都会选择“分卷压缩”来压缩ZIP文件&#xff0c;但是当我们将压缩包分卷之后&#xff0c;解压的时候该如何解压&#xff1f;今天我们分享两个ZIP分卷压缩包如何解压的方法给大家。 一、 我们可以直接点击第一个分卷压缩包&#xf…

USB系列四:USB数据传输类型(重要)

本章包括知识点如下&#xff0c;也是学习USB比较重要的一部分。 USB的块传输方式 USB的中断传输方式 USB的同步传输方式 USB的控制传输方式 USB3.0与USB2.0数据传输对比 USB总线技术协议具有极大的灵活性&#xff0c;可以针对不同的应用场合需求来采用最适合的…

分布式链路追踪工具Sky walking详解

1&#xff0c;为什么要使用分布式链路追踪工具 随着分布式系统和微服务架构的出现&#xff0c;且伴随着用户量的增加&#xff0c;项目的体量变得十分庞大&#xff0c;一次用户请求会经过多个系统&#xff0c;不同服务之间调用关系十分复杂&#xff0c;一旦一个系统出现错误都可…

逆向中webpack需要补充的模块很多怎么办

如下面这种典型的形式 进入i找到加载器 找到加载器所在函数r,在 return e[a].call(c.exports, c, c.exports, r),打上断点。 在控制台打印e,会发现它总共有的模块&#xff0c;这些模块需要我们在别的webpack中复制&#xff0c;有时很多&#xff0c;很麻烦。 我们可以注入代码在…

性能优化的核心思路,纯干货分享!

前言 平时技术交流的时候&#xff0c;很多同学都会问一些性能优化方面的问题。 比如&#xff1a; 有一张订单表为了保持订单记录&#xff0c;更新数据时不能删除&#xff0c;需要打算加上版本号&#xff0c;查询时取版本号最新的给前端&#xff0c;还有场景是查询订单历史给前…

AI日报|Stack Overflow和OpenAI达成合作,Apple正在为数据中心开发人工智能芯片...

欢迎大家在 GitHub 上 Star 我们&#xff1a; 分布式全链路因果学习系统 OpenASCE: https://github.com/Open-All-Scale-Causal-Engine/OpenASCE 大模型驱动的知识图谱 OpenSPG: https://github.com/OpenSPG/openspg 大规模图学习系统 OpenAGL: https://github.com/TuGraph-…

自注意力架构大成者_Transformer(Pytorch 17)

1 模型简介 在上节比较了 卷积神经网络&#xff08;CNN&#xff09;、循环神经网络&#xff08;RNN&#xff09;和 自注意力&#xff08;self‐attention&#xff09;。值得注意的是&#xff0c; 自注意力同时具有并行计算和最短的最大路径长度这两个优势。因此&#xff0c;使…

linux 性能监控命令之dstat

1. dstat 系统默认为安装&#xff0c;直接安装阿里源后&#xff0c;yum install -y dstat安装即可&#xff0c;该命令整合了 vmstat &#xff0c; iostat 和 ifstat&#xff0c;我们先看下效果&#xff1a; 我们先看看具体参数&#xff1a; [rootk8s-master ~]# dstat --help …

解决ModuleNotFoundError: No module named ‘skfuzzy‘,这个库全名可不叫skfuzzy哦,否则直接报错!!

ModuleNotFoundError: No module named skfuzzy 在这里插入图片描述在这里插入图片描述如何解决 ModuleNotFoundError: No module named skfuzzy 的问题&#xff1f;skfuzzy 模块介绍什么是模糊C均值聚类&#xff1f;skfuzzy 的应用如何使用 skfuzzy 进行模糊聚类 结论 如何解决…

电子学会C/C++编程等级考试2024年03月(二级)真题解析

C/C++编程(1~8级)全部真题・点这里 第1题:满足条件的数的累加2 现有n个整数,将其中个位数为k的数进行累加求和 输入 第一行一个整数n。第二行n个非负整数,以空格分割,每个数不大于100000。第三行一个整数k。 输出 输出满足题目要求的累加和 样例输入 10 2 5 7 17 11 18 4…

YOLOv8独家改进:backbone改进 | 轻量化之王MobileNetV4 开源 | Top-1 精度 87%,手机推理速度 3.8ms,原地起飞!

💡💡💡创新点:轻量化之王MobileNetV4 开源 | Top-1 精度 87%,手机推理速度 3.8ms,原地起飞! MobileNetV4(MNv4),其特点是针对移动设备设计的通用高效架构。创新1):引入了通用倒瓶颈(UIB)搜索块,这是一个统一且灵活的结构,它融合了倒瓶颈(IB)、ConvNext、…

如何用mathtype7? MathType7数学公式编辑器使用图文教程2024最新

在我们的日常工作中&#xff0c;经常会使用和编辑到数学公式&#xff0c;那么我们该怎么编辑数学公式呢&#xff1f;今天我们就来看看 MathType7的使用方法 强大的MathType软件是一款适用于Windows和Mac的交互式方程编辑器&#xff0c;你可以为网页、出版物、说明以及TeX、LaT…

用HAL库改写江科大的stm32入门例子_1、按键控制led灯

使用STM32CubeMX生成Keil工程并完成流水灯 ,就不重复了&#xff1a;直接参考&#xff1a; 使用STM32CubeMX生成Keil工程并完成流水灯 进入主题&#xff0c;用中断实现&#xff0c;操作步骤如下&#xff1a; 1 如下图设置PB11 管脚 2 设置PB11为下降沿中断&#xff1a; 3 PA…