Vue3:通过路由写多个页面,通过不同的路径可以进入不同的页面

news2024/12/24 2:22:27

前言

Vue3:想通过路由写2个页面,不同的路径可以进入不同的页面

实现步骤

1、创建Vue3项目

通过脚手架创建一个Vue3的项目,然后在此基础上对文件进行增删改,修改成自己需要的项目框架
在这里插入图片描述

2、views文件夹 对应 页面文件

  • 如果需要写2个页面,则在views文件夹里面创建2个.vue文件

在这里插入图片描述

  • 可以在.vue文件里面书写对应的代码,也可以引入组件:

在这里插入图片描述

3、修改路由文件

在router文件夹下的index.js文件里面,书写每个页面文件对应的路径

  • 不同的页面文件对应的路径和名字是不同的
    在这里插入图片描述

  • 路由重定向redirect:
    执行根目录路由地址时,跳转执行对应的路由地址 ,进而把对应的组件给显示出来
    在这里插入图片描述
    运行完项目之后,默认会打开page1的页面:
    在这里插入图片描述

  • 如果没有加重定向:
    在这里插入图片描述
    运行完项目之后打开的默认页面如下:
    在这里插入图片描述

4、输入不同的路径进入不同的页面

  • 路由代码如下:
    在这里插入图片描述

  • 运行项目后默认的页面如下:
    在这里插入图片描述

  • 修改路径,进入另一个页面:
    在这里插入图片描述

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

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

相关文章

网络编程——网络基础知识

目录 一、网络历史两个重要名词1.1 阿帕网1.2 TCP/IP协议 二、局域网和广域网三、IP地址3.1 基本概念3.2 划分(IPV4)3.3 特殊IP地址3.4 子网掩码3.5 重新组网 四、网络模型4.1 网络的体系结构:4.2 OSI与TCP/IP模型4.2.1 OSI模型4.2.2 TCP/IP模型4.2.3 OSI和TCP/IP模…

C++,类的特殊函数练习

设计一个Per类&#xff0c;类中包含私有成员:姓名、年龄、指针成员身高、体重&#xff0c;再设计一个Stu类&#xff0c;类中包含私有成员:成绩、Per类对象p1&#xff0c;设计这两个类的构造函数、析构函数和拷贝构造函数。 #include <iostream> using namespace std;cla…

OpenAI的Superalignment策略:计算为王

卷友们好&#xff0c;我是rumor。 对于怎么实现AGI这个玄学的目标&#xff0c;感觉大家都是差不多的状态&#xff1a;咱也不知道怎么做&#xff0c;但就是觉得现在的LLM技术还远远不够。 所以之前看到OpenAI说要用模型去做对齐研究[1]&#xff0c;以及最近发话要4年内做出Super…

创建R包-2.1:在RStudio中使用Rcpp制作R-Package(更新于2023.8.23)

目录 0-前言 1-在RStudio中创建R包项目 2-创建R包 2.1通过R函数创建新包 2.2在RStudio通过菜单来创建一个新包 2.3关于R包创建的说明 3-添加R自定义函数 4-添加C函数 0-前言 目标&#xff1a;在RStudio中创建一个R包&#xff0c;这个R包中包含C函数&#xff0c;接口是Rc…

牛客复盘] 2023河南萌新联赛第(七)场:信息工程大学 B\I 20230823

牛客复盘] 2023河南萌新联赛第&#xff08;七&#xff09;场&#xff1a;信息工程大学 B\I 20230823 总结B 七夕1. 题目描述2. 思路分析3. 代码实现 I 细胞分裂1. 题目描述2. 思路分析3. 代码实现 六、参考链接 总结 场外OB做了B和I题&#xff0c;只能说这场有点离谱。B 并查…

律师事务所微信小程序开发方案:实现智能化服务与用户体验的完美结合

随着移动互联网的快速发展&#xff0c;微信成为了人们日常生活中不可或缺的社交工具。为了满足用户对便捷、高效法律服务的需求&#xff0c;律师事务所微信小程序应运而生。本文将探讨律师事务所微信小程序的开发方案&#xff0c;旨在为读者提供一个专业、思考深度和逻辑性的指…

黑客自学笔记

谈起黑客&#xff0c;可能各位都会想到&#xff1a;盗号&#xff0c;其实不尽然&#xff1b;黑客是一群喜爱研究技术的群体&#xff0c;在黑客圈中&#xff0c;一般分为三大圈&#xff1a;娱乐圈 技术圈 职业圈。 娱乐圈&#xff1a;主要是初中生和高中生较多&#xff0c;玩网恋…

【RHEL】硬盘分区与格式化

fdisk命令 在linux中&#xff0c;fdisk是基于菜单的命令。对硬盘分区时&#xff0c;可以在fdisk命令后面直接加上要分区的硬盘作为参数(分区工具) 利用如下所示命令&#xff0c;打开fdisk操作菜单。 输入p,查看当前分区表。从命令执行结果可以到&#xff0c;/dev/mapper/rhel…

网络拓扑结构

目录 1.网络拓扑结构 1.星型拓扑结构 2.网型拓扑结构 3. 数制介绍 3.1 数制的基本概念 1.网络拓扑结构 网络拓扑结构是指用传输媒体互连各种设备的物理布局&#xff0c;也就是用什么方式连接网络中的计算机、网络设备&#xff0c;它的结构有星型拓扑&#xff0c;总线型拓扑…

JVM 之 垃圾收集算法详解

文章目录 一、标记清楚算法二、标记复制算法三、标记整理算法四、不同垃圾收集算法优缺点总结1. 标记-清除算法&#xff1a;2. 标记-复制算法&#xff1a;3. 标记-整理算法&#xff1a; 一、标记清楚算法 标记清除是一种简单而直接的垃圾回收算法。它的执行流程如下&#xff1…

【Rust】Rust学习 第十九章高级特征

现在我们已经学习了 Rust 编程语言中最常用的部分。在第二十章开始另一个新项目之前&#xff0c;让我们聊聊一些总有一天你会遇上的部分内容。你可以将本章作为不经意间遇到未知的内容时的参考。本章将要学习的功能在一些非常特定的场景下很有用处。虽然很少会碰到它们&#xf…

SpringBoot案例-文件上传

目录 简介 文件上传前端页面三要素 服务端接收文件 小结 本地储存 实现 代码优化 小结 阿里云OSS 阿里云 阿里云OSS 使用第三方服务--通用思路 准备工作 参照官方SDK代码&#xff0c;编写入门程序 集成使用 阿里云OSS-使用步骤 阿里云OSS使用步骤 参照SDK编写入…

【QT5-自我学习-线程qThread练习-两种使用方式-2:通过继承Qobject类-自己实现功能函数方式-基础样例】

【QT5-自我学习-线程qThread练习-两种使用方式-2&#xff1a;通过继承Qobject类-自己实现功能函数方式-基础样例】 1、前言2、实验环境3-1、学习链接-参考文章3-2、先前了解-自我总结&#xff08;1&#xff09;线程处理逻辑事件&#xff0c;不能带有主窗口的事件&#xff08;2&…

攻防世界-base÷4

原题 解题思路 base644&#xff0c;莫不是base16&#xff0c;base16解码网站&#xff1a; 千千秀字

k8s 安装istio (一)

前置条件 已经完成 K8S安装过程十&#xff1a;Kubernetes CNI插件与CoreDNS服务部署 部署 istio 服务网格与 Ingress 服务用到了 helm 与 kubectl 这两个命令行工具&#xff0c;这个命令行工具依赖 ~/.kube/config 这个配置文件&#xff0c;目前只在 kubernetes master 节点中…

postgres数据常用SQL语句

-- 系统信息函数 select version(),user,current_user; -- 创建表 CREATE TABLE biao(id INT primary key,name VARCHAR(25) not null,sex VARCHAR(25) unique,salary FLOAT default 9000 ); -- 更换表名 ALTER TABLE biaoRename to biao1; -- 更换字段类型 ALTER TABLE biao1 …

Tushare入门小册

Tushare入门小册 一、Tushare平台介绍 Pro版数据更稳定质量更好了&#xff0c;我们提供的不再是直接从互联网抓取&#xff0c;而是通过社区的采集和整理存入数据库经过质量控制后再提供给用户。但Pro依然是个开放的&#xff0c;免费的平台&#xff0c;不带任何商业性质和目的…

红黑树的调整图解

讲的很好 的红黑树原理 上面的视频讲解的红黑树很好。尤其是关于红黑树的调整。画图做了下总结&#xff0c;谢谢。

AVL——平衡搜索树

✅<1>主页&#xff1a;我的代码爱吃辣&#x1f4c3;<2>知识讲解&#xff1a;数据结构——AVL树☂️<3>开发环境&#xff1a;Visual Studio 2022&#x1f4ac;<4>前言&#xff1a;AVL树是对二叉搜索树的严格高度控制&#xff0c;所以AVL树的搜索效率很高…

微服务中间件--统一网关Gateway

统一网关Gateway 8.统一网关Gatewaya.搭建网关服务b.路由断言工厂c.路由过滤器GatewayFilterd.全局过滤器GlobalFiltere.过滤器的执行顺序f.网关的cors跨域配置 8.统一网关Gateway 网关功能&#xff1a; 身份认证和权限校验服务路由、负载均衡请求限流 网关的技术实现 在Spr…