当前位置： 首页 > article >正文

vue3：初学 vue-router 路由配置

article 2026/3/24 16:54:05

承上一篇：nodejs：express + js-mdict 作为后端，vue 3 + vite 作为前端，在线查询英汉词典

安装 cnpm install vue-router -S

现在讲一讲 vue3：vue-router 路由配置

cd \js\mydict-web\src
mkdir router
cd router 
我还没有编写过 component，先拿 HelloWorld.vue 练练手。编写 router/index.js  如下

import { createRouter, createWebHashHistory } from 'vue-router'const routes = [{   path:'/',name:'hello',component:() => import('../components/HelloWorld.vue'),props:{ msg:'Hello,Vite' } // 传参数}
]const router = createRouter({history: createWebHashHistory(),routes: routes
})export default router

cd  \js\mydict-web\src
copy main.js main1.js
修改 main1.js  如下

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

copy App.vue App1.vue 
修改 App1.vue  如下，增加一行 <router-view></router-view> 后面代码不变

<template><div id="app"><input v-model="sWord" placeholder="请输入英文单词" @keyup.enter="search">&nbsp; <button @click="search">查询</button>&nbsp; <button @click="prefix">前缀查询</button>&nbsp; <button @click="fuzzy">模糊查询</button><div v-if="result"><h3>查询结果</h3><div id="result1" ref="result1" v-html="result"></div></div><div v-if="error">{{ error }}</div><router-view></router-view></div>
</template>

cd  \js\mydict-web\
copy index.html  index1.htm
修改 index1.htm  如下

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><link rel="icon" type="image/svg+xml" href="/vite.svg" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Vite 在线英汉词典查询</title></head><body><div id="app"></div><script type="module" src="/src/main1.js"></script></body>
</html>

运行 cmd
cd \js\mydict-app
node server/app.js
Server is running on port:8006

运行 cmd
cd \js\mydict-web
npm run dev 

访问 http://localhost:5173/index1.htm 

相关文章：

vue3：初学 vue-router 路由配置

承上一篇&#xff1a;nodejs&#xff1a;express js-mdict 作为后端&#xff0c;vue 3 vite 作为前端&#xff0c;在线查询英汉词典 安装 cnpm install vue-router -S 现在讲一讲 vue3&#xff1a;vue-router 路由配置 cd \js\mydict-web\src mkdir router cd router 我还…...

编程日记 2026/3/21 22:38:03

23种设计模式之《备忘录模式（Memento）》在c#中的应用及理解

程序设计中的主要设计模式通常分为三大类&#xff0c;共23种&#xff1a; 1. 创建型模式&#xff08;Creational Patterns&#xff09; 单例模式&#xff08;Singleton&#xff09;&#xff1a;确保一个类只有一个实例&#xff0c;并提供全局访问点。 工厂方法模式&#xff0…...

编程日记 2026/2/21 3:02:39

Python 爬取唐诗宋词三百首

你可以使用 requests 和 BeautifulSoup 来爬取《唐诗三百首》和《宋词三百首》的数据。以下是一个基本的 Python 爬虫示例&#xff0c;它从 中华诗词网 或类似的网站获取数据并保存为 JSON 文件。 import requests from bs4 import BeautifulSoup import json import time# 爬取…...

编程日记 2026/3/15 8:18:39

C语言408考研先行课第一课：数据类型

由于408要考数据结构……会有算法题…… 所以&#xff0c;需要C语言来进行一个预备…… 因为大一贪玩&#xff0c;C语言根本没学进去……谁能想到考研还用得到呢&#xff1f;【手动doge&#xff08;bushi&#xff09; 软件用的是Clion&#xff0c;可以自行搜索教程下载使用。…...

编程日记 2026/3/20 10:49:59

03 HarmonyOS Next仪表盘案例详解（二）：进阶篇

温馨提示&#xff1a;本篇博客的详细代码已发布到 git : https://gitcode.com/nutpi/HarmonyosNext 可以下载运行哦&#xff01; 文章目录 前言1. 响应式设计1.1 屏幕适配1.2 弹性布局 2. 数据展示与交互2.1 数据卡片渲染2.2 图表区域 3. 事件处理机制3.1 点击事件处理3.2 手势…...

编程日记 2026/3/13 23:12:56

探秘基带算法：从原理到5G时代的通信变革【四】Polar 编解码（一）

文章目录 2.3 Polar 编解码2.3.1 Polar 码简介与发展背景2.3.2 信道极化理论基础对称容量与巴氏参数对称容量 I ( W ) I(W) I(W)巴氏参数 Z ( W ) Z(W) Z(W)常见信道信道联合信道分裂信道极化 本博客为系列博客&#xff0c;主要讲解各基带算法的原理与应用&#xff0c;包括&…...

编程日记 2026/3/22 18:51:27

基础篇（一）强化学习是什么？从零开始理解智能体的学习过程

强化学习是什么&#xff1f;从零开始理解智能体的学习过程 你是否曾好奇过&#xff0c;人工智能是如何在复杂的环境中学会做出决策的&#xff1f;无论是打游戏的AI&#xff0c;还是自动驾驶的汽车&#xff0c;还是最近很火的DeepSeek它们的背后都离不开一种强大的技术——强化…...

编程日记 2026/3/16 5:40:36

如何直接导出某个conda环境中的包, 然后直接用 pip install -r requirements.txt 在新环境中安装

1. 导出 Conda 环境配置 conda list --export > conda_requirements.txt这将生成一个 conda_requirements.txt 文件&#xff0c;其中包含当前环境中所有包的列表及其版本信息。 2. 转换为 requirements.txt 文件 grep -v "^#" conda_requirements.txt | cut -d …...

编程日记 2026/3/12 7:04:52

基于 HTML、CSS 和 JavaScript 的智能九宫格图片分割系统

目录 1 前言 2 技术实现 2.1 HTML 结构 2.2 CSS 样式 2.3 JavaScript 交互 3 代码解析 3.1 HTML 部分 3.2 CSS 部分 3.3 JavaScript 部分 4 完整代码 5 运行结果 6 总结 6.1 系统特点 6.2 使用方法 1 前言 在当今数字化的时代&#xff0c;图片处理需求日益增长。…...

编程日记 2026/3/19 17:32:05

委托者模式（掌握设计模式的核心之一）

目录 问题&#xff1a; 举例&#xff1a; 总结&#xff1a;核心就是利用Java中的多态来完成注入。 问题&#xff1a; 今天刷面经&#xff0c;刷到装饰者模式&#xff0c;又进阶的发现委托者模式&#xff0c;发现还是不理解&#xff0c;特此记录。 举例&#xff1a; ​老板​…...

编程日记 2026/3/15 19:42:55

MySQL-高级查询

查询处理 排序&#xff08;默认不是按主键排序的&#xff09; order by 字段1[&#xff0c;字段2] [asc|desc] 默认是升序排序也可以指定 select 列表中列的序号进行排序如果是多个字段&#xff0c;那么在上一个字段排序完的基础上排序下一个 限制数量 limit 行数&#xff0…...

编程日记 2026/3/23 10:18:22

R JSON 文件

R JSON 文件 引言 在当今的数据分析和处理领域&#xff0c;R语言作为一种功能强大的统计计算和图形展示工具&#xff0c;被广泛应用于各种数据分析任务中。随着大数据时代的到来&#xff0c;数据的格式和结构变得越来越多样化。JSON&#xff08;JavaScript Object Notation&a…...

编程日记 2026/3/19 10:42:09

Apache Kafka单节点极速部署指南：10分钟搭建开发单节点环境

Apache Kafka单节点极速部署指南&#xff1a;10分钟搭建开发单节点环境 Kafka简介&#xff1a; Apache Kafka是由LinkedIn开发并捐赠给Apache基金会的分布式流处理平台&#xff0c;现已成为实时数据管道和流应用领域的行业标准。它基于高吞吐、低延迟的设计理念&#xff0c;能够…...

编程日记 2026/3/19 18:44:36

Redis7——进阶篇（一）

前言&#xff1a;此篇文章系本人学习过程中记录下来的笔记&#xff0c;里面难免会有不少欠缺的地方&#xff0c;诚心期待大家多多给予指教。 基础篇&#xff1a; Redis&#xff08;一&#xff09;Redis&#xff08;二&#xff09;Redis&#xff08;三&#xff09;Redis&#x…...

编程日记 2026/3/20 10:49:59

点云配准技术的演进与前沿探索：从传统算法到深度学习融合(4)

4、点云配准面临的挑战与应对策略 4.1 点云配准面临的主要挑战 在点云配准的实际应用中&#xff0c;尽管已经取得了显著的研究成果&#xff0c;但仍然面临着诸多复杂而严峻的挑战&#xff0c;这些挑战严重制约了点云配准技术在更多领域的广泛应用和深入发展。 在自动驾驶场景…...

编程日记 2026/1/24 8:45:30

Linux·数据库INSERT优化

在业务中&#xff0c;我们经常会要对数据进行存储&#xff0c;对于少量数据插入时&#xff0c;我们可以直接使用 INSERT 插入数据&#xff0c;但是当我们需要插入的数据比较多时&#xff0c;使用 INSERT 插入的话时间消耗是很大的&#xff0c;具体而言单次插入600时&#xff0c…...

编程日记 2026/1/29 17:41:49

Sourcetrail 代码分析工具

Sourcetrail 概述 Sourcetrail 是一个代码分析工具&#xff0c;它旨在帮助开发人员理解和导航复杂的代码库。它可以创建代码库的可视化图形&#xff0c;显示代码中的类、函数、变量、依赖关系等信息&#xff0c;从而帮助开发人员更好地理解代码结构和关系&#xff0c;降低维护…...

编程日记 2026/3/7 22:10:26

从数据到决策，永洪科技助力良信电器“智”领未来

在数字经济浪潮汹涌的时代&#xff0c;数字化转型已成为企业增强竞争力、实现可持续发展的必由之路。良信电器&#xff0c;作为国内知名的电气设备制造企业&#xff0c;积极响应时代号召&#xff0c;携手永洪科技&#xff0c;共同开启了数字化转型的新篇章。 上海良信电器股份有…...

编程日记 2026/3/15 11:16:26

Python-04BeautifulSoup网络爬虫

2025-03-04-BeautifulSoup网络爬虫 记录BeautifulSoup网络爬虫的核心知识点 文章目录 2025-03-04-BeautifulSoup网络爬虫 [toc]1-参考网址2-学习要点3-核心知识点1. 安装2. 导入必要的库3. 发送 HTTP 请求4. 创建 BeautifulSoup 对象5. 解析 HTML 内容5.1 查找标签5.2 根据属性…...

编程日记 2026/3/18 23:26:20

Spring框架自带的定时任务：Spring Task详解

文章目录 一、基本使用1、配置&#xff1a;EnableScheduling2、触发器&#xff1a;Scheduled 二、拓展1、修改默认的线程池2、springboot配置 三、源码分析参考资料 一、基本使用 1、配置&#xff1a;EnableScheduling import org.springframework.context.annotation.Config…...

编程日记 2026/3/17 6:27:26

深入探索像ChatGPT这样的大语言模型

参考 【必看珍藏】2月6日&#xff0c;安德烈卡帕西最新AI普及课&#xff1a;深入探索像ChatGPT这样的大语言模型&#xff5c;Andrej Karpathy fineweb知乎翻译介绍 fineweb-v1原始连接 fineweb中文翻译版本 Chinese Fineweb Edu数据集 查看网络的内部结果&#xff0c;可以参…...

编程日记 2026/3/10 8:03:40

week 3 - More on Collections - Lecture 3

一、Motivation 1. Java支持哪种类型的一维数据结构&#xff1f; Java中用于在单一维度中存储数据的数据结构&#xff0c;如arrays or ArrayLists. 2. 如何在Java下创建一维数据结构&#xff1f;&#xff08;1-dimensional data structure&#xff09; 定义和初始化这些一…...

编程日记 2026/3/20 12:43:37

机器学习11-经典网络解析

机器学习11-经典网络解析 AlexNetImageNet 大规模视觉识别挑战赛一、赛事背景与目的二、数据集与任务设置三、参赛规则与流程四、评审标准与机制五、历史与影响六、中国团队的表现 贡献解析CONV1层MaxP00L1层NORM1层CONV2层 CONV3、CONV4层CONV4&#xff0c;Max POOL3 层FC6、F…...

编程日记 2026/3/14 6:50:59

【AI深度学习基础】NumPy完全指南入门篇：核心功能与工程实践（含完整代码）

NumPy系列文章 入门篇进阶篇终极篇 一、NumPy简介 NumPy&#xff08;Numerical Python&#xff09;是Python中科学计算的核心库&#xff0c;提供了高性能的多维数组对象和各种用于数组操作的函数。它是Python数据分析和科学计算的基础&#xff0c;被广泛应用于机器学习、数据…...

编程日记 2025/12/26 9:28:46

【数据结构】链表与顺序表的比较

链表和顺序表是两种常见的数据结构&#xff0c;各有优缺点&#xff0c;适用于不同的场景。 ### 顺序表&#xff08;数组&#xff09; 顺序表在内存中连续存储元素&#xff0c;支持随机访问。 **优点&#xff1a;** 1. **随机访问**&#xff1a;通过索引直接访问元素&#xf…...

编程日记 2026/3/8 17:58:34

【JavaScript—前端快速入门】JavaScript 基础语法

JavaScript 基础语法 1. 变量 创建变量(变量定义 / 变量声明 / 变量初始化)&#xff0c;JS 声明变量有3种方式 2. 通过打印日志&#xff0c;查看变量类型 JavaScript 是一门动态弱类型语言&#xff0c;变量可以存放不同类型的值(动态) 接下来&#xff0c;我们通过使用 log 指令…...

编程日记 2026/3/20 10:49:58

deepseek助力运维和监控自动化

将DeepSeek与Agent、工作流及Agent编排技术结合&#xff0c;可实现IT运维与监控的智能化闭环管理。以下是具体应用框架和场景示例&#xff1a; 一、智能Agent体系设计 多模态感知Agent 日志解析Agent&#xff1a;基于DeepSeek的NLP能力&#xff0c;实时解析系统日志中的语义&a…...

编程日记 2026/3/15 8:16:28

日志分析集群安装部署（ELK） 保姆级教程

创建用户es不用root用户 创建的用户是elasticsearch密码:elasticsearch useradd elasticsearch && echo elasticsearch|passwd --stdin elasticsearch 1.优化最打进程数、最大文件打开数、优化虚拟内存 、elastic.co vim /etc/security/limit.conf * soft nofile 65…...

编程日记 2025/7/5 16:58:37

springboot在业务层校验对象/集合中字段是否符合要求

springboot在业务层校验对象参数是否必填 1.场景说明2.代码实现 1.场景说明 为什么不在控制层使用Validated或者Valid注解直接进行校验呢&#xff1f;例如通过excel导入数据&#xff0c;将excel数据转为实体类集合后&#xff0c;校验集合中属性是否符合要求。 2.代码实现 定义…...

编程日记 2026/3/15 8:14:20

【UCB CS 61B SP24】Lecture 17 - Data Structures 3: B-Trees 学习笔记

本文以 2-3-4 树为例详细讲解了 B 树的概念&#xff0c;逐步分析其操作&#xff0c;并用 Java 实现了标准的多阶 B 树。 1. 2-3 & 2-3-4 Trees 上一节课中讲到的二叉搜索树当数据是随机顺序插入的时候能够使得树变得比较茂密&#xff0c;如下图右侧所示&#xff0c;时间复…...

编程日记 2026/3/21 2:14:48