Nuxt3路由跳转

学习这篇文章之前,需要具备使用Nuxt3框架搭建基础项目 ,如果有这个基础可以跳过.直接看下面的声明式路由跳转

声明式路由跳转

创建两个基础文件 ~/pages/index.vue 和 ~/pages/About.vue
⚠️一定要是index.vue不能够大写Index.vue, 否则报错.

<!--
| ~/pages/
--| About.vue
--| index.vue
-->
<!-- ~/pages/index.vue --><template><h1>Index page</h1><NuxtLink to="/about">About page</NuxtLink>
</template><!-- ~/pages/About.vue -->
<template><div>About.vue</div>
</template>

浏览器中将http://localhost:3000 ->修改为 http://localhost:3000/about
to="/about" 会替换成 About.vue 的页面.自然 index.vue 页面的内容就不展示

有其他疑问,请留言

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

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

相关文章

程序员必备的7大神器,效率飞起!

我们都知道程序员在工作时&#xff0c;会经常遇到任务繁重的情况&#xff0c;为了提高效率&#xff0c;程序员们也会借助一些软件&#xff0c;那么哪些软件可以帮助程序员们提高工作效率呢&#xff1f; 整理不易&#xff0c;关注一波&#xff01;&#xff01; 1. Xftp 7 Xft…

数据结构-线性表-应用题-2.2-4

从有序顺序表中删除其值在给定值s与t之间&#xff08;要求s<t&#xff09;的所有元素&#xff0c;若s或t不合理或顺序表为空&#xff0c;则显示出错信息并退出运行。 有序顺序表如无特殊说明&#xff0c;一般指递增有序 先找到值大于等于s的第一个元素&#xff0c;然后找值…

区块链 | NFT 相关论文:Preventing Content Cloning in NFT Collections(一)

&#x1f436;原文&#xff1a; Preventing Content Cloning in NFT Collections &#x1f436;写在前面&#xff1a; 这是一篇 2023 年的 CCF-C 类&#xff0c;本博客只记录其中提出的方法。 A Robust NFT Collection Functionality 我们将在本节中提出一个定义。在假设有恶…

06-beanFactoryPostProcessor的执行

文章目录 invokeBeanFactoryPostProcessors(beanFactory)invokeBeanFactoryPostProcessors(beanFactory, getBeanFactoryPostProcessors())invokeBeanDefinitionRegistryPostProcessors(currentRegistryProcessors, registry);invokeBeanFactoryPostProcessors(regularPostProc…

将ESP工作为AP路由模式并当成服务器

将ESP8266模块通过usb转串口接入电脑 ATCWMODE3 //1.配置成双模ATCIPMUX1 //2.使能多链接ATCIPSERVER1 //3.建立TCPServerATCIPSEND0,4 //4.发送4个字节在链接0通道上 >ATCIPCLOSE0 //5.断开连接通过wifi找到安信可的wifi信号并连接 连接后查看自己的ip地址变为192.168.4.…

Java中next()与nextLine()的区别[不废话,直接讲例子]

在使用牛客进行刷题时&#xff0c;我们很多时候会遇到这样的情况&#xff1a; 区别很简单&#xff0c;如果你要输入用空格或者回车分开的数据如&#xff1a; abc_def_ghi 这三组数据&#xff08; _ 是空格&#xff09; 用hasNext: 执行结果&#xff1a; 如果只用换行符号进行…

6层板学习笔记1

说明:笔记基于6层全志H3消费电子0.65MM间距BGA 目的:掌握各类接口的布局思路和布线,掌握DDR高速存储设计 1、网表的导入是原理图的元件电气连接关系,位号,封装,名称等参数信息的总和 2、原理图文件包含(历史版本记录,功能总框图,电源树,GPIO分配,DDR功能,CPU,US…

Mysql:Before start of result set

解决方法&#xff1a;使用resultSet.getString&#xff08;&#xff09;之前一定要调用resultSet.next() ResultSet resultSet statement1.executeQuery();while (resultSet.next()){String username1 resultSet.getString("username");int id1 resultSet.getInt…

pytorch基础: torch.unbind()

1. torch.unbind 作用 说明&#xff1a;移除指定维后&#xff0c;返回一个元组&#xff0c;包含了沿着指定维切片后的各个切片。 参数&#xff1a; tensor(Tensor) – 输入张量dim(int) – 删除的维度 2. 案例 案例1 x torch.rand(1,80,3,360,360)y x.unbind(dim2)print(&…

数据结构-线性表-链表-2.3-2

在带头节点的单链表L中&#xff0c;删除所有值为x的结点&#xff0c;并释放其空间&#xff0c;假设值为x的结点不唯一&#xff0c; 是编写算法实现上述操作。 双指针&#xff0c;用p从头至尾扫描单链表&#xff0c;pre指向*p结点的前驱&#xff0c;若p所指结点的值为x&#x…

大模型培训老师叶梓 AI编程的未来:GitHub Copilot的创新之旅与实践智慧

GitHub Copilot 是一个由 GitHub 开发的先进工具&#xff0c;它利用大语言模型&#xff08;LLM&#xff09;来辅助开发者编写代码。这个工具的开发和成功部署为其他希望构建企业级 LLM 应用的团队提供了宝贵的经验。以下是根据提供的文献&#xff0c;对 GitHub Copilot 实践之路…

案例分享:BACnet转Modbus提升暖通系统互操作性

现代智能建筑中系统的集成与互操作性是决定其智能化程度的关键因素。随着技术的发展&#xff0c;不同标准下的设备共存成为常态&#xff0c;而BACnet与Modbus作为楼宇自动化领域广泛采用的通讯协议&#xff0c;它们之间的无缝对接显得尤为重要。本文将通过一个实际案例&#xf…

全面的Partisia Blockchain 生态 4 月市场进展解读

Partisia Blockchain 是一个以高迸发、隐私、高度可互操作性、可拓展为特性的 Layer1 网络。通过将 MPC 技术方案引入到区块链系统中&#xff0c;以零知识证明&#xff08;ZK&#xff09;技术和多方计算&#xff08;MPC&#xff09;为基础&#xff0c;共同保障在不影响网络完整…

哈夫曼树的构造和求带权路径

问题 B: 简单哈夫曼树 时间限制: 1 Sec 内存限制: 128 MB 提交: 543 解决: 343 [提交][状态] 题目描述 给出n个结点的描述&#xff0c;构造一棵哈夫曼树。 输入 第一行是一个正整数t。 接下来有t组数据&#xff0c;每组数据有两行。 第一行是一个正整数n&#xff0c;表示…

如何在matlab时间序列中X轴标注月-日

一般我们使用的时间序列都是以年为单位&#xff0c;比如下图&#xff1a; 而如果要绘制月尺度的时间变化图&#xff0c;则需要调整X轴的标注。下面代码展示了如何绘制小时尺度的降水数据。 [sname2,lon2,lat2] kml2xy(GZ_.kml); nc_bound2 [lon2,lat2]; area_ind2inpolygon(e…

WSL介绍(Windows10内置的Linux子系统)

最近发现在Windows10下不用安装虚拟机也可以使用Linux&#xff0c;然后发现原来2016年就已经有这个功能了&#xff0c;下面来介绍下如何使用。 首先我的win10版本信息如下&#xff0c;以免部分版本不支持&#xff0c;可以做个参考。 需要进到控制面板里将Linux子系统功能打开&a…

Linux学习笔记1

1.背景认知 可能很多人还没有接触Linux&#xff0c;会有点畏惧&#xff0c;我们可以把Linux类比成Windows&#xff0c; 下面是Windows和Linux的启动对比 Windows&#xff1a;上电后一开始屏幕是黑黑的---bios在启动Windows----Windows之后找到c盘启动各种应用程序 Linux&am…

可视化大屏比例

<!-- 数据大屏展示内容区域 --><div class"screen" ref"screen"></div> screen.value.style.transform scale(${getScale()}) translate(-50%,-50%) //获取数据大屏展示内容盒子的DOM元素 let screen ref() onMounted(() > {scr…

Web前端三大主流框架是什么?

Web前端开发领域的三大主流框架分别是Angular、React和Vue.js。它们在Web开发领域中占据着重要的地位&#xff0c;各自拥有独特的特点和优势。 Angular Angular是一个由Google开发的前端框架&#xff0c;最初版本称为AngularJS&#xff0c;后来升级为Angular。它是一个完整的…

Apple强大功能:在新款 iPad Pro 和 iPad Air 中释放 M4 芯片潜力

Apple 的最新强大功能&#xff1a;在新款 iPad Pro 和 iPad Air 中释放 M4 芯片的潜力 概述 Apple 推出配备强大 M4 芯片的最新 iPad Pro 和 iPad Air 型号&#xff0c;再次突破创新界限。新一代 iPad 有望彻底改变我们的工作、创造和娱乐方式。凭借无与伦比的处理能力、令人惊…