当前位置: 首页 > news >正文

【Vue-Router】路由入门

路由(Routing)是指确定网站或应用程序中特定页面的方式。在Web开发中,路由用于根据URL的不同部分来确定应用程序中应该显示哪个内容。

  1. 构建前端项目
npm init vue@latest
//或者
npm init vite@latest
  1. 安装依赖和路由
npm install
npm install vue-router -S

在这里插入图片描述
3. router 使用

login.vue

<template><div><div class="login">login</div></div>
</template><script setup lang="ts"></script><style scoped>
.login {background-color: red;height: 400px;width: 400px;font-size: 20px;color: white;
}
</style>

reg.vue

<template><div><div class="reg">reg</div></div>
</template><script setup lang="ts"></script><style scoped>
.reg {background-color: green;height: 400px;width: 400px;font-size: 20px;color: white;
}
</style>

index.ts

import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";const routes: Array<RouteRecordRaw> = [{path: "/",component: () => import("../components/login.vue")},{path: "/reg",component: () => import("../components/reg.vue")}
]const router = createRouter({history: createWebHistory(),routes
})export default router

App.vue

<template><h1>hello world</h1><div><router-link to="/">Login</router-link><router-link style="margin: 10px;" to="/reg">Reg</router-link></div><hr><router-view></router-view>
</template><script setup lang="ts"></script><style scoped></style>

main.ts

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
createApp(App).use(router).mount('#app')

在这里插入图片描述

相关文章:

【Vue-Router】路由入门

路由&#xff08;Routing&#xff09;是指确定网站或应用程序中特定页面的方式。在Web开发中&#xff0c;路由用于根据URL的不同部分来确定应用程序中应该显示哪个内容。 构建前端项目 npm init vuelatest //或者 npm init vitelatest安装依赖和路由 npm install npm instal…...

蓝牙耳机运动耳机哪个好、好用的运动蓝牙耳机推荐

如今的蓝牙耳机已经成为手机的最佳伴侣&#xff0c;也是运动爱好者的必备装备。然而&#xff0c;在众多蓝牙耳机中做出选择可能会让人感到困惑。其实&#xff0c;在选购运动蓝牙耳机时需要注意的事项还挺多的&#xff0c;比如舒适度、稳定性和音质等多个方面,逐一对照这些要点来…...

大数据面试题:Kafka的ISR机制

面试题来源&#xff1a; 《大数据面试题 V4.0》 大数据面试题V3.0&#xff0c;523道题&#xff0c;679页&#xff0c;46w字 可回答&#xff1a;1&#xff09;从ISR踢出去之后呢&#xff1b;2&#xff09;一般Leader怎么判断Follower挂掉&#xff1f; 参考答案&#xff1a; …...

Windows:解决MySQL登录ERROR 1045 (28000): Access denied for user ‘root‘@‘localhost‘ (using passwor=YES)问题

我在下载的MySQL是8.0.32版本&#xff0c;刚下的时候没什么问题第二天启动MySQL服务就出现了 ERROR 1045 (28000): Access denied for user rootlocalhost (using password: YES) 或 ERROR 1045 (28000): Access denied for user rootlocalhost (using password: NO) 这样的问题…...

springboot整合kafka多数据源

整合kafka多数据源 项目背景依赖配置生产者消费者消息体 项目背景 在很多与第三方公司对接的时候&#xff0c;或者处在不同的网络环境下&#xff0c;比如在互联网和政务外网的分布部署服务的时候&#xff0c;我们需要对接多台kafka来达到我们的业务需求&#xff0c;那么当kafk…...

基于CentOS 7 配置nginx负载均衡

搭建负载均衡服务的需求如下&#xff1a; 1 ) 把单台计算机无法承受的大规模并发访问或数据流量分担到多台节点设备上&#xff0c;分别进行处理&#xff0c; 减少用户等待响应的时间&#xff0c; 提升用户体验。 2 ) 单个重负载的运算分担到多台节点设备上做并行处理&#xff…...

WordToPDF2.java

用Java将Word转PDF 本例子测试了spire.doc.free-3.9.0.jar的包 <dependency><groupId> e-iceblue </groupId><artifactId>spire.doc.free</artifactId><version>3.9.0</version></dependency> package word;import com.spire.…...

k8s服务注册发现

Service 是 将运行在一个或一组pod上的网络应用程序公开为网络服务的方法。 定义service前端为service名称、ip、端口等不变的部分&#xff0c;后端为符合标签选择的pod集合 注册 通过api server提交注册service请求到DNSservice随后得到clusterIP&#xff08;虚拟ip地址&am…...

IK分词器升级,MySQL热更新助一臂之力

ik分词器采用MySQL热更新 ​ 官方所给的IK分词器只支持远程文本文件热更新&#xff0c;不支持采用MySQL热更新&#xff0c;没关系&#xff0c;这难不倒伟大的博主&#xff0c;给哈哈哈。今天就来和大家讲一下如何采用MySQL做热更新IK分词器的词库。 一、建立数据库表 CREATE…...

泛微 E-Office文件上传漏洞复现

声明 本文仅用于技术交流&#xff0c;请勿用于非法用途 由于传播、利用此文所提供的信息而造成的任何直接或者间接的后果及损失&#xff0c;均由使用者本人负责&#xff0c;文章作者不为此承担任何责任。 文章作者拥有对此文章的修改和解释权。如欲转载或传播此文章&#xff0c…...

bug的生命周期

bug的生命周期 bugbug的生命周期bug等级 bug 当且仅当规格说明书是存在的并且正确的&#xff0c;程序和规格说明书之间的不匹配才是错误当产品规格说明书没有提到时&#xff0c;以用户需求为准&#xff0c;当程序最终没有实现用户的合理预期的功能要求时&#xff0c;就是软件错…...

mysql分库分表相关

3小时快速上手sharding-jdbc 百亿级数据 分库分表 后面怎么分页查询&#xff1f; Java实战&#xff1a;教你如何进行数据库分库分表...

云原生k8s---资源限制、探针

目录 一&#xff1a;资源限制 1、资源限制原因 2、Pod 和 容器 的资源请求和限制 3、CPU 资源单位 4、内存 资源单位 5、事例 &#xff08;1&#xff09;事例一 &#xff08;2&#xff09;事例二 二&#xff1a;重启策略 1、重启策略模式 2、事例 三&#xff1a;探针…...

html2canvas生成图片地址Base64格式转成blob在转成file(二进制)可正常发送(保姆教程,复制粘贴可用)

开始: 最终结果: 1. html2canvas方法生成的图片地址已Base64编码形式放在img标签src中可直接展示生成的图片(注意页面标签获取位置,还有个setTimeout页面渲染需要时间) setTimeout(function () {var result {};v…...

将Linux上的cpolar内网穿透配置为开机自启动——“cpolar内网穿透”

将Linux上的cpolar内网穿透配置为开机自启动 文章目录 将Linux上的cpolar内网穿透配置为开机自启动前言一、进入命令行模式二、输入token码三、输入内网穿透命令 前言 我们将cpolar安装到了Ubuntu系统上&#xff0c;并通过web-UI界面对cpolar的功能有了初步了解。当然cpolar除…...

微信小程序data-item设置获取不到数据的问题

微信小程序data-item设置获取不到数据的问题 简单说明&#xff1a; 在微信小程序中&#xff0c;通过列表渲染使用wx:for根据数组中的每一项重复渲染组件。同时使用bindtap给每一项绑定点击事件clickItem&#xff0c;再通过data-item绑定数据。 **问题&#xff1a;**通过data-i…...

创建百度百科需要什么条件?

随着互联网的发展&#xff0c;人们越来越依赖于搜索引擎获取信息。百度作为中国最大的搜索引擎之一&#xff0c;旗下的百科词条已成为人们获取知识的重要来源。创建百度百科需要什么条件呢&#xff1f;接下来伯乐网络传媒就来给大家讲一讲。 首先&#xff0c;你需要有一个百度…...

【springboot启动报错】java: 错误: 无效的源发行版:17

报错截图 解决方案 第一步&#xff1a;编辑配置&#xff0c;改为想用的jdk版本 第二步&#xff1a;文件--->项目结构&#xff0c;改为对应的SDK 第三步&#xff1a;文件--->设置--->构建、执行、部署--->编译器--->Java编译器&#xff0c;修改目标字节码版本 第…...

无涯教程-Perl - setservent函数

描述 在第一次调用getservent之前,应先调用此函数。 STAYOPEN参数是可选的,在大多数系统上未使用。当getservent()检索服务数据库中下一行的信息时,然后setervent设置(或重置)枚举到主机条目集的开头。 语法 以下是此函数的简单语法- setservent STAYOPEN返回值 此函数不返…...

Java创建多线程的最全方法

Java创建多线程的最全方法 一、继承Thread&#xff0c;重写run方法二、实现Runnable接口&#xff0c;重写run方法三、使用匿名内部类创建 Thread 子类对象四、使用匿名内部类&#xff0c;实现Runnable接口五、实现Callable接口六、使用线程池创建线程 一、继承Thread&#xff0…...

浏览器访问 AWS ECS 上部署的 Docker 容器(监听 80 端口)

✅ 一、ECS 服务配置 Dockerfile 确保监听 80 端口 EXPOSE 80 CMD ["nginx", "-g", "daemon off;"]或 EXPOSE 80 CMD ["python3", "-m", "http.server", "80"]任务定义&#xff08;Task Definition&…...

网络六边形受到攻击

大家读完觉得有帮助记得关注和点赞&#xff01;&#xff01;&#xff01; 抽象 现代智能交通系统 &#xff08;ITS&#xff09; 的一个关键要求是能够以安全、可靠和匿名的方式从互联车辆和移动设备收集地理参考数据。Nexagon 协议建立在 IETF 定位器/ID 分离协议 &#xff08;…...

MPNet:旋转机械轻量化故障诊断模型详解python代码复现

目录 一、问题背景与挑战 二、MPNet核心架构 2.1 多分支特征融合模块(MBFM) 2.2 残差注意力金字塔模块(RAPM) 2.2.1 空间金字塔注意力(SPA) 2.2.2 金字塔残差块(PRBlock) 2.3 分类器设计 三、关键技术突破 3.1 多尺度特征融合 3.2 轻量化设计策略 3.3 抗噪声…...

C++初阶-list的底层

目录 1.std::list实现的所有代码 2.list的简单介绍 2.1实现list的类 2.2_list_iterator的实现 2.2.1_list_iterator实现的原因和好处 2.2.2_list_iterator实现 2.3_list_node的实现 2.3.1. 避免递归的模板依赖 2.3.2. 内存布局一致性 2.3.3. 类型安全的替代方案 2.3.…...

在HarmonyOS ArkTS ArkUI-X 5.0及以上版本中,手势开发全攻略:

在 HarmonyOS 应用开发中&#xff0c;手势交互是连接用户与设备的核心纽带。ArkTS 框架提供了丰富的手势处理能力&#xff0c;既支持点击、长按、拖拽等基础单一手势的精细控制&#xff0c;也能通过多种绑定策略解决父子组件的手势竞争问题。本文将结合官方开发文档&#xff0c…...

376. Wiggle Subsequence

376. Wiggle Subsequence 代码 class Solution { public:int wiggleMaxLength(vector<int>& nums) {int n nums.size();int res 1;int prediff 0;int curdiff 0;for(int i 0;i < n-1;i){curdiff nums[i1] - nums[i];if( (prediff > 0 && curdif…...

el-switch文字内置

el-switch文字内置 效果 vue <div style"color:#ffffff;font-size:14px;float:left;margin-bottom:5px;margin-right:5px;">自动加载</div> <el-switch v-model"value" active-color"#3E99FB" inactive-color"#DCDFE6"…...

MVC 数据库

MVC 数据库 引言 在软件开发领域,Model-View-Controller(MVC)是一种流行的软件架构模式,它将应用程序分为三个核心组件:模型(Model)、视图(View)和控制器(Controller)。这种模式有助于提高代码的可维护性和可扩展性。本文将深入探讨MVC架构与数据库之间的关系,以…...

【决胜公务员考试】求职OMG——见面课测验1

2025最新版&#xff01;&#xff01;&#xff01;6.8截至答题&#xff0c;大家注意呀&#xff01; 博主码字不易点个关注吧,祝期末顺利~~ 1.单选题(2分) 下列说法错误的是:&#xff08; B &#xff09; A.选调生属于公务员系统 B.公务员属于事业编 C.选调生有基层锻炼的要求 D…...

深入解析C++中的extern关键字:跨文件共享变量与函数的终极指南

&#x1f680; C extern 关键字深度解析&#xff1a;跨文件编程的终极指南 &#x1f4c5; 更新时间&#xff1a;2025年6月5日 &#x1f3f7;️ 标签&#xff1a;C | extern关键字 | 多文件编程 | 链接与声明 | 现代C 文章目录 前言&#x1f525;一、extern 是什么&#xff1f;&…...