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

vue: router基础用法

news 来源：原创 2025/9/10 0:54:38

router基础用法

1.安装router
2.配置router
3.路由编程
- 1.编程式导航
- 2.声明式导航

1.安装router

在node环境下，直接运行

npm install router@4

2.配置router

创建文件夹并命名为router
在router文件夹中创建index.js
index.js示例配置如下：


import { createWebHistory, createRouter } from 'vue-router'import LoginPage from '../views/LoginPage.vue'
import RegisterView from '../views/RegisterPage.vue'
import IndexView from '../views/Index.vue'const routes = [{ path: '/', component: LoginPage },{ path: '/register', component: RegisterView },{ path: '/index', component: IndexView },
]const router = createRouter({history: createWebHistory(),routes,
})
export default router

在上述示例中，定义了三个路由，分别对应LoginPage、RegisterView、IndexView三个页面，在其他页面中，通过编程式导航或者声明式导航，可以跳转到这些页面。
在main.js中使用该路由

main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'const app = createApp(App)
//全局使用该路由
app.use(router)
app.mount('#app')

3.路由编程

在App.vue中，只放置一个路由入口：RouterView

<template><!-- <img alt="Vue logo"> --><!-- app.vue只留一个路由入口，需要显示的页面在router/index.js中设置 组件功能：根据路由显示页面--><router-view></router-view>
</template>

由于路由 ‘/’ 对应的component是 LoginPage，所以访问前端页面时默认会跳转到LoginPage。

1.编程式导航

通过javascript动态导航，

this.$router.push(url)

例如，在LoginPage.vue中，当验证密码通过后，跳转到/index页面

<template><div class="login"><img src="../assets/logo.png" alt="" class="logo"><form  @submit.prevent="onSubmit"><ul class="loginText"><li>登录</li></ul><ul class="inputPrompt"><li><label for="mail">请输入邮箱</label></li><li><input type="text" v-model="loginData.username" id="mail"></li></ul><ul class="inputPrompt"><li><label for="pwd">请输入密码</label></li><li><input type="text" v-model="loginData.password" id="pwd"></li></ul><div><ul class="help"><li class="checkbox"><input type="checkbox" id="ckbx" title="rmb"/></li><li><label>记住我</label></li><li><label>忘记密码</label></li></ul></div><div><button type="submit" class="loginButton">登录</button></div></form><div><!-- 声明式导航 --><router-link class="registerButton" to="/register" >注册</router-link></div></div></template><script>
import axios from 'axios';export default {name: 'LoginPage',props: {msg: String},data(){return {loginData:{username:"",password:"",}}},beforeCreate () {document.querySelector('body').setAttribute('style', 'background:#f4f6f9')},methods:{onSubmit(){// console.log(this.loginData)axios.get('/login', {params: {username: this.loginData.username,password: this.loginData.password}})// 箭头函数避免vue实例this与then函数this发生冲突.then((response)=>{console.log(response);console.log(this.$router)// 事件跳转this.$router.push('/index')}).catch(function (error) {alert("密码错误")console.log(error);});},}
}
</script><style scoped>
.login {width: 300px;height: 600px;background: #ffffff;margin: auto;border-top: 2px solid #6777ef;
}
ul {margin: 20px 20px;/* border: 1px solid blueviolet; */
}li {width: 100px;height: 30px;text-align: left;/* border: 1px solid yellow; */margin: 10px 0px;/* 内容居中展示 */align-content: center; list-style-type:none;
}input {padding: 0;margin: 0;border: 1px solid #e6e8fc;box-sizing: border-box;height: 30px; /* 设置 input 元素的高度与 li 元素一致 */line-height: 20px; /* 设置行高与高度一致 */
}.loginText {font-size: 20px;/* color: #7483ef; */
}.inputPrompt{font-size: 15px;font-weight: 10px;/* color: black; */
}.help {display: flex;font-size: 10px;/* border: 1px solid green; */
}.help .checkbox{width: 10px;margin-right: 5px;
}
.help li {width: 50px;margin-right: 40px;list-style-type:none;
}.loginButton {width: 200px;height: 30px;color: #fffefe;background-color: #6777ef;border: 0px;border-radius: 5px;
}.registerButton {border: 0px;background-color: #ffffff;margin-top: 20px;
}.logo {width: 100px;height: 100px;
}</style>

2.声明式导航

在上面的LoginPage.vue中，当需要注册时，点击注册，跳转到RegisterView.vue页面，就是通过声明式导航router-link实现的。

<router-link class="registerButton" to="/register" >注册</router-link>

vue: router基础用法

router基础用法 1.安装router2.配置router3.路由编程1.编程式导航2.声明式导航 1.安装router 在node环境下，直接运行 npm install router42.配置router 创建文件夹并命名为router 在router文件夹中创建index.js index.js示例配置如下： import { creat…...

编程日记 2025/9/10 0:54:38

IDE中使用Spring Data Redis

步骤一：导入Spring Data Redis的maven坐标 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-redis</artifactId></dependency> 步骤二：配置Redis数据源步骤三&…...

编程日记 2025/9/1 1:43:23

【计网】网络交换技术之报文交换（复习自用，了解，重要3）

复习自用的，处理得比较草率，复习的同学或者想看基础的同学可以看看，大佬的话可以不用浪费时间在我的水文上了另外两种交换技术可以直接点击链接访问相关笔记： 电路交换分组交换一、报文交换的定义报文交换（Me…...

编程日记 2025/9/8 6:48:03

文章目录使用外部 nginx 参考：https://docs.gitlab.com/omnibus/settings/nginx.html 使用内置 nginx 参考：https://docs.gitlab.com/omnibus/settings/ssl/index.html#configure-https-manually // 使用自己手工申请证书 $ mkdir /etc/gitlab/ssl $ m…...

编程日记 2025/9/10 0:54:37

中间件--ClickHouse-1--基础介绍（列式存储，MPP架构，分布式计算，SQL支持，向量化执行，亿万级数据秒级查询）

1、概述 ClickHouse是一个用于联机分析(OLAP)的列式数据库管理系统(DBMS)。它由俄罗斯的互联网巨头Yandex为解决其内部数据分析需求而开发，并于2016年开源。专为大规模数据分析，实时数据分析和复杂查询设计，具有高性能、实时数据和可扩展性等…...

编程日记 2025/9/1 16:32:00

【编写Node接口；接口动态获取VUE文件并异步加载, 并渲染impoort插件使用】

编写Node接口；接口动态获取VUE文件并异步加载, 并渲染impoort插件使用； vue3-sfc-loader主要特征： 编写Node接口：Vue2项目使用：Vue3项目使用：（页面按需加载插件、图片等）主要使用&am…...

编程日记 2025/9/7 14:07:08

vue入门：template 和 JSX

temlplate 和 jsx 最终渲染时都是创建 dom 节点 template 和 JSX 混合使用 <template><div><span>Message: {{ msg }}</span><br/><VNodes :vnodes"getJSXSpan()"/><VNodes :vnodes"getAnchoredHeading(4)"/>…...

编程日记 2025/9/2 20:02:38

[Dify] Dify 本地部署及连接 Ollama 模型全流程指南

在构建私有化智能应用时，Dify 作为一款开源的大模型应用开发平台，具备强大的插件体系和可扩展能力。本文将详细介绍如何在本地环境中部署 Dify，并成功连接本地的 Ollama 模型，解决实际部署过程中常见的问题与错误。一、本地部署 Dify 步骤详解 1. 安装 Docker 环境（以 W…...

编程日记 2025/9/5 7:48:00

基于PyQt5的Jupyter Notebook转Python工具

一、项目背景与核心价值在数据科学领域，Jupyter Notebook因其交互特性广受欢迎，但在生产环境中通常需要将其转换为标准Python文件。本文介绍一款基于PyQt5开发的桌面级转换工具，具有以下核心价值：可视化操作：提供友好的GUI界面，告别命令行操作批量处理：支持目录递归…...

编程日记 2025/9/5 0:25:10

从自然语言到 JSON 数据交互：探索 MCP 协议的自动化任务实现

好的！以下是基于我们讨论的关于 MCP 协议、JSON 数据交互以及自然语言到 JSON 转换的实现过程的总结，格式化为一篇 CSDN 风格的博客记录。这篇文章将记录你的发现，适合分享给技术社区。从自然语言到 JSON 数据交互：探索 MCP 协议…...

编程日记 2025/9/10 0:53:54

n8n 本地部署及实践应用，实现零成本自动化运营 Telegram 频道（保证好使）

n8n 本地部署及实践应用，实现零成本自动化运营 Telegram 频道（保证好使） 简介 n8n 介绍一、高度可定制性二、丰富的连接器生态三、自托管部署（本地部署） 四、社区驱动 n8n 的部署一、前期准备二、部署步…...

编程日记 2025/9/10 0:54:37

嵌入式学习(37)-STM32串口发送中断的实现

一、概述项目中需要用到发送中断，所以了解了发送中断的一些知识。二、应用状态寄存器USART_SR的复位值为0x00C0H, 也就是第七位TXE和第六位TC复位值为1，而TXE1,表明发送数据寄存器为空， TC1表明发送已完成。 USART_ITConfig(USART1, USA…...

编程日记 2025/9/5 22:52:56

Android envsetup与Python venv使用指南

Android envsetup 和 Python venv 是两种完全不同的环境配置工具，分别服务于不同的开发场景。以下是对它们的详细解释及使用方法： 1. Android envsetup 用途： Android envsetup 是 Android 源码开发中的环境配置脚本（envsetup.sh…...

编程日记 2025/9/9 2:31:29

安卓关机和重启源码流程

// systemui关机 frameworks/base/packages/SystemUI/src/com/android/systemui/globalactions/GlobalActionsComponent.java Overridepublic void shutdown() {try {mBarService.shutdown();} catch (RemoteException e) {}}frameworks/base/services/core/java/com/android…...

编程日记 2025/9/5 3:08:45

解决单设备号双目摄像头调用难题：经验分享与总结

解决单设备号双目摄像头调用难题：经验分享与总结在计算机视觉项目中，双目摄像头的调用是常见需求，但过程中往往会遇到各种挑战。最近，我就经历了一段曲折但最终成功解决问题的历程，现在将这段宝贵经验分享给大家。一、问题背景我手头的双目摄像头仅有一个设备号（设…...

编程日记 2025/9/9 16:39:26

【RL系列】DAPO: An Open-Source LLM Reinforcement Learning System at Scale

1. 简介尽管RL对complex reasoning效果提升有重要作用，但是在openAI o1和DeepSeek R1 technical report上都没有详细的实验细节。本文主要提出了DAPO算法，提出了4个关键技术点并开源参数和代码。在AIME 2024验证了DAPO算法的有效性。 2. Tricks Exc…...

编程日记 2025/9/9 7:02:14

五子棋(测试报告)

文章目录一、项目介绍二、测试用例三、自动化测试用例的部分展示注册登录游戏大厅游戏匹配总结一、项目介绍本项目是一款基于Spring、SpringMVC、MyBatis、WebSocket的双人实时对战五子棋游戏,游戏操作便捷，功能清晰明了。二、测试用例三、自动化测试用例的…...

编程日记 2025/9/7 10:16:14

【小工具】定时任务执行器

定时任务执行器背景版本代码JobJob执行机背景有时我们的项目内需要一个定时执行器来执行某些任务，就需要一个简单好用的定时任务机。注意，这个定时任务机并不原生支持分布式，如果需要分布式的功能请自己实现。版本 jdk21 代码 Job …...

编程日记 2025/9/7 19:16:12

LVGL源码（7）:渲染

在LVGL源码(4):LVGL关于EVENT事件的响应逻辑_lvgl实现显示打车-CSDN博客这篇文章中，我们提到了LVGL的三大步骤：检测用户输入操作、调用我们编写的逻辑、在屏幕上显示对应的画面；而在学习完“样式”之后，我们或许可以将上述步骤说明…...

编程日记 2025/9/8 0:49:15

02_通过调用硅基流动平台deepseekapi按输入的标题生成文章

from openai import OpenAIclient OpenAI(base_urlhttps://api.siliconflow.cn/v1,api_keyyou api-key )# 定义关键词变量 keyword "人性的弱点都有哪些？"# 发送带有流式输出的请求 response client.chat.completions.create(model"deepseek-ai/D…...

编程日记 2025/9/7 22:55:11

三、Virtual Device Manager

一、创建AVD AVD是Android Virtual Device（安卓虚拟设备）,我们可以启动Android Studio 选择 Virtual Device Manager 创建并启动一个模拟器。二、设置屏幕大小上面直接创建的镜像是不能设置屏幕大小的，启动后笔记本屏幕都放不下&#xff…...

编程日记 2025/9/9 6:54:34

MATLAB2022b安装

1 从百度网盘下载MATLAB2022b，下载完成后解压到某个文件夹； 链接: MATLAB2022b 提取码: 6666 2 打开解压后的文件夹，进入setup文件夹，双击打开“setup.exe”文件； 3 在弹出窗口中选择“高级选项”-->“我有文件安…...

编程日记 2025/9/9 1:05:27

计算机编码

计算机，不能直接存储文字，存储的是编码。计算机只能处理二进制的数据，其它数据，比如：0-9、a-z、A-Z，这些字符，我们可以定义一套规则来表示。假如：A用110表示，B用111表示…...

编程日记 2025/9/3 0:03:18

Dell EMC Unity NAS 认证方式介绍

近日有个客户要配置EMC Unity的NAS访问，我们知道NAS有Linux环境下的NFS和Windows环境下的SMB（也叫做CIFS）。单独配置其中的一种访问协议相对简单，但是客户提出的要求是要对文件系统同时NFS和SMB访问，这就有些复杂&…...

编程日记 2025/9/2 20:33:42

SpringAi 会话记忆功能

在使用chatGPT，豆包等产品后，就会发现他们的会话有“记忆”功能。那么我们用API接口的话，这个是怎么实现的呢？ 属于比较粗暴的方式，把之前的内容与新的提示词一起再次发给大模型。让我们看到他们有记忆功能。下面介绍…...

编程日记 2025/9/4 16:49:30

BUUCTF-web刷题篇(25)

34.the mystery of ip 给出链接，输入得到首页： 有三个按钮，flag点击后发现页面窃取客户端的IP地址，通过给出的github代码中的php文件发现可以通过XFF或Client-IP传入值。使用hackbar或BP 使用XSS，通过github给出的目录…...

编程日记 2025/9/4 15:04:05

Elasticsearch 性能优化：从原理到实践的全面指南

Elasticsearch（ES）作为一款基于 Lucene 的分布式搜索和分析引擎，广泛应用于日志分析、搜索引擎和实时数据处理等场景。然而，在高并发、大数据量环境下，Elasticsearch 的性能可能面临瓶颈，如查询延迟高、索引…...

编程日记 2025/9/7 1:04:23

UITableVIew性能优化概述

UITableVIew性能优化概述文章目录 UITableVIew性能优化概述前言如何优化优化的本质卡顿的原因 CPU层级cell复用UITableVIew尽量采用复用定义cell的种类尽量少，可以多用hidden缓存cell高度基础设置预先设置高度设置一个预先缓存异步绘制滑动按照需加载尽量显示大小…...

编程日记 2025/9/4 11:44:27

【Linux网络与网络编程】09.传输层协议TCP

前言 TCP 即传输控制协议 (Transmission Control Protocol)，该协议要对数据的传输进行一个详细的控制（数据传输时什么时候传输，一次发多少，怎么发，出错了怎么办……） 本篇博客将从下面这张TCP协议格式图…...

编程日记 2025/9/4 19:58:42

08.unity 游戏开发-unity编辑器资源的导入导出分享

08.unity 游戏开发-unity编辑器资源的导入导出分享提示：帮帮志会陆续更新非常多的IT技术知识，希望分享的内容对您有用。本章分享的是Python基础语法。前后每一小节的内容是存在的有：学习and理解的关联性，希望对您有用~ unity简介…...

编程日记 2025/9/7 4:06:10

Docker Swarm 集群

Docker Swarm 集群本文档介绍了 Docker Swarm 集群的基本概念、工作原理以及相关命令使用示例，包括如何在服务调度中使用自定义标签。本文档适用于需要管理和扩展 Docker 容器化应用程序的生产环境场景。 1. 什么是 Docker Swarm Docker Swarm 是用于管理 Docker…...

编程日记 2025/9/2 20:39:24

数据中台、数据湖和数据仓库区别

1. 核心定义与定位数据仓库（Data Warehouse） 定义：面向主题的、集成的、历史性且稳定的结构化数据集合，主要用于支持管理决策和深度分析。定位：服务于管理层和数据分析师，通过历史数据生成报表和商业智能…...

编程日记 2025/9/9 10:24:27

【CodeMirror】系列（二）官网示例（五）可撤销操作、拆分视图、斑马条纹

一、可撤销操作默认情况下，history 历史记录扩展仅跟踪文档和选择的更改，撤销操作只会回滚这些更改，而不会影响编辑器状态的其他部分。不过你也可以将其他的操作定义成可撤销的。如果把这些操作看作状态效果，就可以把相关功能整…...

编程日记 2025/9/3 18:25:06

SpringBoot 动态路由菜单权限系统开发菜单权限数据库设计不同角色对应不同权限

介绍系统中的路由配置可以根据用户的身份、角色或其他权限信息动态生成，而不是固定在系统中。不同的用户根据其权限会看到不同的路由，访问不同的页面。对应各部门不同的权限。效果 [{"id": 1,"menuName": "用户管理"…...

编程日记 2025/9/7 22:55:05

scikit-learn 开源框架在机器学习中的应用

文章目录 scikit-learn 开源框架介绍1. 框架概述1.1 基本介绍1.2 版本信息 2. 核心功能模块2.1 监督学习2.2 无监督学习2.3 数据处理 3. 关键设计理念3.1 统一API设计3.2 流水线(Pipeline) 4. 重要辅助功能4.1 模型选择4.2 评估指标 5. 性能优化技巧5.1 并行计算5.2 内存优化 6…...

编程日记 2025/9/8 12:53:43

GPT-4、Grok 3与Gemini 2.0 Pro：三大AI模型的语气、风格与能力深度对比

更新后的完整CSDN博客文章以下是基于您的要求，包含修正后的幻觉率部分并保留原始信息的完整CSDN博客风格文章。幻觉率已调整为更符合逻辑的描述，其他部分保持不变。 GPT-4、Grok 3与Gemini 2.0 Pro：三大AI模型的语气、风格与能力深度对比 …...

编程日记 2025/9/8 5:57:11

Cyber Weekly #51

赛博新闻 1、英伟达开源新模型，性能直逼DeepSeek-R1 本周，英伟达开源了基于Meta早期Llama-3.1-405B-Instruct模型开发的Llama-3.1-Nemotron-Ultra-253B-v1大语言模型，该模型拥有2530亿参数，在多项基准测试中展现出与6710亿参数的…...

编程日记 2025/9/1 15:55:58

QT聊天项目开发DAY02

1.添加输入密码的保密性 LoginWidget::LoginWidget(QDialog*parent): QDialog(parent) {ui.setupUi(this);ui.PassWord_Edit->setEchoMode(QLineEdit::Password);BindSlots(); }2.添加密码的验证提示 3.修复内存泄漏，并嵌套UI子窗口到主窗口里面之前并没有设置…...

编程日记 2025/9/6 8:14:48

Spring AI高级RAG功能查询重写和查询翻译

1、创建查询重写转换器 // 创建查询重写转换器queryTransformer RewriteQueryTransformer.builder().chatClientBuilder(openAiChatClient.mutate()).build(); 查询重写是RAG系统中的一个重要优化技术，它能够将用户的原始查询转换成更加结构化和明确的形式。这种转…...

编程日记 2025/9/9 4:08:50

速盾：高防CDN的原理和高防IP一样吗？

随着互联网的发展，网络安全威胁日益严重，尤其是DDoS攻击、CC攻击等恶意行为，给企业带来了巨大的风险。为了应对这些挑战，许多企业开始采用高防CDN（内容分发网络）和高防IP作为防御措施。尽管两者都能提供一定…...

编程日记 2025/9/8 1:27:51

SQLite-Web：一个轻量级的SQLite数据库管理工具

SQLite-Web 是一个基于 Web 浏览器的轻量级 SQLite 数据库管理工具。它基于 Python 开发，免费开源，无需复杂的安装或配置，适合快速搭建本地或内网的 SQLite 管理和开发环境。 SQLite-Web 支持常见的 SQLite 数据库管理和开发任务，…...

编程日记 2025/8/17 19:11:50

数智读书笔记系列028 《奇点更近》

一、引言在科技飞速发展的今天，我们对未来的好奇与日俱增。科技将如何改变我们的生活、社会乃至人类本身？雷・库兹韦尔的《奇点更近》为我们提供了深刻的见解和大胆的预测，让我们得以一窥未来几十年的科技蓝图。这本书不仅是对未来科技趋势…...

编程日记 2025/9/8 8:59:56

深入理解linux操作系统---第4讲用户、组和密码管理

4.1 UNIX系统的用户和组 4.1.1 用户与UID UID定义：用户身份唯一标识符，16位或32位整数，范围0-65535。系统用户UID为0（root）、1-999（系统服务），普通用户从1000开始分配特殊UID&…...

编程日记 2025/9/7 20:23:50

系统设计模块之安全架构设计（常见攻击防御（SQL注入、XSS、CSRF、DDoS））

一、SQL注入攻击防御 SQL注入是通过恶意输入篡改数据库查询逻辑的攻击方式，可能导致数据泄露或数据库破坏。防御核心在于隔离用户输入与SQL代码，具体措施包括： 参数化查询（预编译语句） 原理：将SQL语句与用…...

编程日记 2025/9/5 18:08:55

redission锁释放失败处理

redission锁释放失败处理 https://www.jianshu.com/p/055ae798547a 就是可以删除锁的key 这样锁就释放了，但是还是要结合业务，这种是非正规的处理方式，还是要在代码层面进行处理。...

编程日记 2025/9/5 13:24:27

Visual Studio Code 在.S汇编文件中添加调试断点及功能简介

目录一、VS Code汇编文件添加断点二、VS Code断点调试功能简介1. 设置断点(1) 单行断点(2) 条件断点(3) 日志断点 2. 查看断点列表3. 调试时的断点控制4. 禁用/启用断点5. 删除断点6. 条件断点的使用7. 多线程调试8. 远程调试9. 调试配置文件一、VS Code汇编文件添加断点最…...

编程日记 2025/9/2 21:30:10