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

如何在 Vue 3 中使用 Vue Router 和 Vuex

在 Vue 3 中使用 Vue Router

1. 安装 Vue Router

在项目根目录下,通过 npm 或 yarn 安装 Vue Router 4(适用于 Vue 3):

npm install vue-router@4
# 或者使用 yarn
yarn add vue-router@4
2. 创建路由配置文件

src 目录下创建一个 router 文件夹,并在其中创建 index.js 文件,用于配置路由:

// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue'; // 假设 Home 组件在 views 文件夹下
import About from '../views/About.vue'; // 假设 About 组件在 views 文件夹下const routes = [{path: '/',name: 'Home',component: Home},{path: '/about',name: 'About',component: About}
];const router = createRouter({history: createWebHistory(),routes
});export default router;
3. 在主应用中使用路由

main.js 中引入并使用路由:

// src/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');
4. 在模板中使用路由

App.vue 中添加路由出口和导航链接:

<template><div><!-- 导航链接 --><router-link to="/">Home</router-link><router-link to="/about">About</router-link><!-- 路由出口,用于显示当前路由对应的组件 --><router-view></router-view></div>
</template><script setup>
// 这里可以添加其他逻辑
</script><style scoped>
/* 样式 */
</style>
5. 路由导航守卫(可选)

可以使用路由导航守卫来控制路由的访问权限等,例如在 router/index.js 中添加全局前置守卫:

// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';const routes = [{path: '/',name: 'Home',component: Home},{path: '/about',name: 'About',component: About}
];const router = createRouter({history: createWebHistory(),routes
});// 全局前置守卫
router.beforeEach((to, from, next) => {// 可以在这里添加权限验证等逻辑console.log('Before each navigation');next();
});export default router;

在 Vue 3 中使用 Vuex(Vuex 4 适用于 Vue 3)

1. 安装 Vuex

在项目根目录下,通过 npm 或 yarn 安装 Vuex 4:

npm install vuex@4
# 或者使用 yarn
yarn add vuex@4
2. 创建 store

src 目录下创建一个 store 文件夹,并在其中创建 index.js 文件,用于创建和配置 store:

// src/store/index.js
import { createStore } from 'vuex';const store = createStore({state() {return {count: 0};},mutations: {increment(state) {state.count++;},decrement(state) {state.count--;}},actions: {incrementAsync(context) {setTimeout(() => {context.commit('increment');}, 1000);}},getters: {doubleCount(state) {return state.count * 2;}}
});export default store;
3. 在主应用中使用 store

main.js 中引入并使用 store:

// src/main.js
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';const app = createApp(App);
app.use(router);
app.use(store);
app.mount('#app');
4. 在组件中使用 store

在组件中可以通过不同方式使用 store 中的状态、mutations、actions 和 getters:

<template><div><p>Count: {{ count }}</p><p>Double Count: {{ doubleCount }}</p><button @click="increment">Increment</button><button @click="decrement">Decrement</button><button @click="incrementAsync">Increment Async</button></div>
</template><script setup>
import { useStore } from 'vuex';const store = useStore();const count = store.state.count;
const doubleCount = store.getters.doubleCount;const increment = () => {store.commit('increment');
};const decrement = () => {store.commit('decrement');
};const incrementAsync = () => {store.dispatch('incrementAsync');
};
</script><style scoped>
/* 样式 */
</style>

通过以上步骤,你就可以在 Vue 3 项目中成功使用 Vue Router 和 Vuex 了。在实际开发中,你可以根据项目需求进一步扩展和优化路由配置和 store 逻辑。

相关文章:

如何在 Vue 3 中使用 Vue Router 和 Vuex

在 Vue 3 中使用 Vue Router 1. 安装 Vue Router 在项目根目录下&#xff0c;通过 npm 或 yarn 安装 Vue Router 4&#xff08;适用于 Vue 3&#xff09;&#xff1a; npm install vue-router4 # 或者使用 yarn yarn add vue-router42. 创建路由配置文件 在 src 目录下创建…...

Fiori APP配置中的Semantic object 小bug

在配置自开发程序的Fiori Tile时&#xff0c;需要填入Semantic Object。正常来说&#xff0c;是需要通过事务代码/N/UI2/SEMOBJ来提前新建的。 但是在S4 2022中&#xff0c;似乎存在一个bug&#xff0c;即无需新建也能输入自定义的Semantic Object。 如下&#xff0c;当我们任…...

【触想智能】工业显示器和普通显示器的区别以及工业显示器的主要应用领域分析

在现代工业中&#xff0c;工业显示器被广泛应用于各种场景&#xff0c;从监控系统到生产控制&#xff0c;它们在实时数据显示、操作界面和信息传递方面发挥着重要作用。与普通显示器相比&#xff0c;工业显示器在耐用性、可靠性和适应特殊环境的能力上有着显著的差异。 触想工业…...

BPMN.js 与 DeepSeek 集成:打造个性化 Web 培训项目的秘诀

在数字化时代&#xff0c;Web培训项目的需求日益增长&#xff0c;特别是对于程序员群体&#xff0c;他们寻求高效、灵活的方式来提升自己的技能。本文将深入探讨如何评估BPMN.js与DeepSeek集成方案&#xff0c;以满足开发Web培训项目的需求。 BPMN.js 的优势 BPMN.js是一个专…...

第二月:学习 NumPy、Pandas 和 Matplotlib 是数据分析和科学计算的基础

以下是一个为期 **1 个月&#xff08;30 天&#xff09;**的详细学习计划&#xff0c;精确到每天的学习内容和练习作业&#xff0c;帮助你系统地掌握 NumPy、Pandas 和 Matplotlib 的核心功能。 第 1 周&#xff1a;NumPy 基础 Day 1&#xff1a;NumPy 简介与数组创建 学习内…...

安全测试|SSRF请求伪造

前言 SSRF漏洞是一种在未能获取服务器权限时&#xff0c;利用服务器漏洞&#xff0c;由攻击者构造请求&#xff0c;服务器端发起请求的安全漏洞&#xff0c;攻击者可以利用该漏洞诱使服务器端应用程序向攻击者选择的任意域发出HTTP请求。 很多Web应用都提供了从其他的服务器上…...

Flink提交pyflink任务

1.官方文档&#xff1a; flink1.14:https://nightlies.apache.org/flink/flink-docs-release-1.14/docs/deployment/cli/#submitting-pyflink-jobs flink1.18:https://nightlies.apache.org/flink/flink-docs-release-1.18/docs/deployment/cli/#submitting-pyflink-jobs 2.提…...

对称算法模式之CTR

Note 计数器模式&#xff0c;通过加密递增计数器生成密钥流&#xff0c;后密钥流与明文分组异或得密文分组可并行性进行加密或者解密&#xff0c;性能较高明文可以是任意长度&#xff0c;不需要填充可以直接加密或解密指定块&#xff0c;块与块间不具有依赖关系 参数说明 任…...

Map 和 Set

目录 一、搜索 概念&#xff1a; 模型&#xff1a; 二、Map ​编辑 1.Map 实例化&#xff1a; 2. Map的常见方法&#xff1a; 3.Map的常见方法演示&#xff1a; 1. put(K key, V value)&#xff1a;添加键值对 3. containsKey(Object key)&#xff1a;检查键是否存在 4.…...

STOMP协议

引用&#xff1a;https://blog.csdn.net/print_helloword/article/details/142597122 什么是STOMP协议 STOMP (simple text oriented messaging protocol): 一种简单的&#xff0c;基于文本的消息传输协议&#xff0c;&#xff0c;&#xff0c;最初是为了解决在消息队列中&am…...

手动埋点的demo

上代码 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>埋点示例</title> </head><b…...

大模型开发实战篇5:多模态--文生图模型API

大模型文生图是一种基于人工智能大模型的技术&#xff0c;能够将自然语言文本描述转化为对应的图像。目前非常火的AI大模型赛道&#xff0c;有很多公司在此赛道竞争。详情可看这篇文章。 今天我们来看下如何调用WebAPI来实现文生图功能。我们一般都会将OpenAI的接口&#xff0…...

【大模型】DeepSeek 高级提示词技巧使用详解

目录 一、前言 二、DeepSeek 通用提示词技巧 2.1 DeepSeek 通用提示词技巧总结 三、DeepSeek 进阶使用技巧 3.1 DeepSeek一个特定角色的人设 3.1.1 为DeepSeek设置角色操作案例一 3.1.2 为DeepSeek设置角色操作案例二 3.2 DeepSeek开放人设升级 3.2.1 特殊的人设&#…...

【第14章:神经符号集成与可解释AI—14.2 可解释AI技术:LIME、SHAP等的实现与应用案例】

在这里插入图片描述 凌晨三点的ICU病房,值班医生李主任盯着AI辅助诊断系统的红色警报——这套准确率高达95%的深度学习系统,突然建议对一位肾衰竭患者进行肝移植手术。正当医疗组陷入混乱时,李主任打开了系统的"解释模式",屏幕上立即跳出SHAP分析图:模型误将CT…...

Python中使用Minio实现图像或视频文件的存储

目录 一、Minio的基本介绍1.Minio是什么2.Minio的优势 二、使用步骤1.启动Minio2.创建桶3.在Python中使用Minio3.1安装并导入minio包3.2创建mino_utils工具类 三、操作演示1.引入minio_utils工具类2.上传视频文件3.获取视频文件 总结 一、Minio的基本介绍 1.Minio是什么 Mini…...

Kubernetes-master 组件

以下是Kubernetes Master Machine的组件。 etcd 它存储集群中每个节点可以使用的配置信息。它是一个高可用性键值存储&#xff0c;可以在多个节点之间分布。只有Kubernetes API服务器可以访问它&#xff0c;因为它可能具有一些敏感信息。这是一个分布式键值存储&#xff0c;所…...

人形机器人 - 仿生机器人核心技术与大小脑

以下是针对仿生机器人核心技术的结构化总结,涵盖通用核心技术与**“大脑-小脑”专用架构**两大方向: 一、机器人通用核心技术 这些技术是仿生机器人实现功能的基础,与生物体的“身体能力”对应: 1. 感知与交互技术 多模态传感器融合 视觉:3D视觉(如RGB-D相机)、动态目…...

OpenAI 快速入门

文章来源&#xff1a;OpenAI开发者平台 | OpenAI开发文档|OpenAI中文官方文档|ChatGPT中文版|ChatGPT教程 开发人员快速入门 了解如何发出您的第一个 API 请求。 OpenAI API 为最先进的 AI 模型提供了一个简单的接口&#xff0c;用于自然语言处理、图像生成、语义搜索和语音识…...

nginx 实战配置

一、配置一个默认80端口的&#xff0c;静态页面&#xff0c;路径是path1。 http://192.168.0.111/path1 &#xff0c; /path1路径指向linux的/data/index1.html vi /data/nginx-1.24.0/conf/nginx.conf 文件添加以下配置 location /path1 { alias /data/…...

WebMvcConfigurer 介绍

WebMvcConfigurer 介绍 1. 什么是WebMvcConfigurer 介绍2. WebMvcConfigurer接口常用的方法3. 使用WebMvcConfigurer实现跨域4. 使用WebMvcConfigurer配置拦截器5. 使用WebMvcConfigurer配置静态资源5.1 配置外部目录&#xff08;本地文件系统&#xff09;详细解释 6. 使用 Web…...

Debian系统简介

目录 Debian系统介绍 Debian版本介绍 Debian软件源介绍 软件包管理工具dpkg dpkg核心指令详解 安装软件包 卸载软件包 查询软件包状态 验证软件包完整性 手动处理依赖关系 dpkg vs apt Debian系统介绍 Debian 和 Ubuntu 都是基于 Debian内核 的 Linux 发行版&#xff…...

Axios请求超时重发机制

Axios 超时重新请求实现方案 在 Axios 中实现超时重新请求可以通过以下几种方式&#xff1a; 1. 使用拦截器实现自动重试 import axios from axios;// 创建axios实例 const instance axios.create();// 设置超时时间 instance.defaults.timeout 5000;// 最大重试次数 cons…...

AI书签管理工具开发全记录(十九):嵌入资源处理

1.前言 &#x1f4dd; 在上一篇文章中&#xff0c;我们完成了书签的导入导出功能。本篇文章我们研究如何处理嵌入资源&#xff0c;方便后续将资源打包到一个可执行文件中。 2.embed介绍 &#x1f3af; Go 1.16 引入了革命性的 embed 包&#xff0c;彻底改变了静态资源管理的…...

Python 包管理器 uv 介绍

Python 包管理器 uv 全面介绍 uv 是由 Astral&#xff08;热门工具 Ruff 的开发者&#xff09;推出的下一代高性能 Python 包管理器和构建工具&#xff0c;用 Rust 编写。它旨在解决传统工具&#xff08;如 pip、virtualenv、pip-tools&#xff09;的性能瓶颈&#xff0c;同时…...

动态 Web 开发技术入门篇

一、HTTP 协议核心 1.1 HTTP 基础 协议全称 &#xff1a;HyperText Transfer Protocol&#xff08;超文本传输协议&#xff09; 默认端口 &#xff1a;HTTP 使用 80 端口&#xff0c;HTTPS 使用 443 端口。 请求方法 &#xff1a; GET &#xff1a;用于获取资源&#xff0c;…...

push [特殊字符] present

push &#x1f19a; present 前言present和dismiss特点代码演示 push和pop特点代码演示 前言 在 iOS 开发中&#xff0c;push 和 present 是两种不同的视图控制器切换方式&#xff0c;它们有着显著的区别。 present和dismiss 特点 在当前控制器上方新建视图层级需要手动调用…...

(一)单例模式

一、前言 单例模式属于六大创建型模式,即在软件设计过程中,主要关注创建对象的结果,并不关心创建对象的过程及细节。创建型设计模式将类对象的实例化过程进行抽象化接口设计,从而隐藏了类对象的实例是如何被创建的,封装了软件系统使用的具体对象类型。 六大创建型模式包括…...

【p2p、分布式,区块链笔记 MESH】Bluetooth蓝牙通信 BLE Mesh协议的拓扑结构 定向转发机制

目录 节点的功能承载层&#xff08;GATT/Adv&#xff09;局限性&#xff1a; 拓扑关系定向转发机制定向转发意义 CG 节点的功能 节点的功能由节点支持的特性和功能决定。所有节点都能够发送和接收网格消息。节点还可以选择支持一个或多个附加功能&#xff0c;如 Configuration …...

Python竞赛环境搭建全攻略

Python环境搭建竞赛技术文章大纲 竞赛背景与意义 竞赛的目的与价值Python在竞赛中的应用场景环境搭建对竞赛效率的影响 竞赛环境需求分析 常见竞赛类型&#xff08;算法、数据分析、机器学习等&#xff09;不同竞赛对Python版本及库的要求硬件与操作系统的兼容性问题 Pyth…...

JDK 17 序列化是怎么回事

如何序列化&#xff1f;其实很简单&#xff0c;就是根据每个类型&#xff0c;用工厂类调用。逐个完成。 没什么漂亮的代码&#xff0c;只有有效、稳定的代码。 代码中调用toJson toJson 代码 mapper.writeValueAsString ObjectMapper DefaultSerializerProvider 一堆实…...