Vue 3 30天精进之旅:Day 10 - Vue Router
在现代单页面应用(SPA)中,路由管理是必不可少的一部分。Vue Router是Vue.js官方的路由管理库,它使得在Vue应用中实现路由变得简单而灵活。今天的学习将围绕以下几个方面展开:
- Vue Router概述
- 安装和基本配置
- 定义路由
- 路由视图和路由链接
- 嵌套路由
- 路由传参
- 页面导航和路由守卫
- 总结与实践
1. Vue Router概述
Vue Router是Vue.js的路由管理器,负责处理应用中的不同视图组件之间的导航。它可以用来实现各种功能,例如嵌套路由、传递参数、路由守卫等。使用Vue Router,你可以构建一个用户体验更加流畅的单页面应用,使得用户在不同视图之间切换时不会出现页面重新加载的情况。
2. 安装和基本配置
2.1. 安装Vue Router
要在Vue项目中使用Vue Router,你需要首先安装它。通过npm命令安装:
npm install vue-router@4
2.2. 引入和使用Vue Router
在项目的入口文件(通常是 main.js)中引入和配置Vue Router。
javascript
// main.js
import { createApp } from 'vue';
import App from './App.vue';
import { createRouter, createWebHistory } from 'vue-router';// 导入组件
import Home from './views/Home.vue';
import About from './views/About.vue';// 定义路由
const routes = [{ path: '/', component: Home },{ path: '/about', component: About },
];// 创建路由实例
const router = createRouter({history: createWebHistory(),routes,
});// 创建并挂载应用
const app = createApp(App);
app.use(router);
app.mount('#app');
在上述代码中,我们导入了需要用于路由的组件,并定义了一个简单的路由配置。然后,使用 createRouter 创建一个路由实例,并将其传递给 Vue 应用。
3. 定义路由
在 Vue Router 中,路由通过一个对象数组来定义,每个对象通常包含如下几个重要属性:
path: 路由的路径。component: 路由对应的组件。name: 路由的名称(可选)。
下面是一个简单的示例,定义了几个不同的路由:
javascript
const routes = [{ path: '/', component: Home, name: 'home' },{ path: '/about', component: About, name: 'about' },{ path: '/:id', component: UserProfile, name: 'user-profile' }, // 动态路由
];
4. 路由视图和路由链接
在根组件中使用 <router-view> 组件来呈现与当前路由匹配的组件:
vue
<template><div id="app"><nav><router-link to="/">Home</router-link><router-link to="/about">About</router-link></nav><router-view></router-view> <!-- 路由视图 --></div>
</template>
<router-link>:这是用于导航的组件,生成一个链接,可以替代传统的<a>标签,具有 SPA 应用特性。
5. 嵌套路由
嵌套路由可以让你在相同的页面上展示多个视图,为复杂的布局提供支持。下面是一个设置嵌套路由的示例:
javascript
const routes = [{path: '/user',component: User,children: [{path: 'profile',component: UserProfile,},{path: 'settings',component: UserSettings,}]}
];
在这个示例中,/user/profile 和 /user/settings 都是用户路由的子路由。你需要在 User 组件中使用 <router-view> 来呈现子路由内容。
6. 路由传参
Vue Router 允许你在路由中传递参数,最常见的是动态参数。例如,在用户档案页面中传递用户ID:
javascript
const routes = [{path: '/user/:id',component: UserProfile,name: 'user-profile',}
];
在 UserProfile 组件中,你可以使用 $route.params 来访问参数:
vue
<script>
export default {setup() {const route = useRoute(); // 导入 useRoute 获取路由对象return {userId: route.params.id,};},
};
</script>
7. 页面导航和路由守卫
7.1. 程序化导航
除了使用 <router-link>,你还可以通过编程方式进行导航。例如:
this.$router.push('/about');
7.2. 路由守卫
路由守卫用于在导航发生前控制访问,通常用于权限验证。Vue Router 提供了多种类型的守卫:全局守卫、路由独享守卫和组件内守卫。
javascript
// 全局守卫
router.beforeEach((to, from, next) => {const isAuthenticated = // 逻辑判断用户是否已认证;if (to.name !== 'login' && !isAuthenticated) {next({ name: 'login' });} else {next(); // 允许路由继续}
});
8. 总结与实践
在今天的学习中,我们深入了解了Vue Router的基础知识和使用方法。通过安装和配置Vue Router,我们创建了基本的路由和导航,并掌握了嵌套路由、参数传递及路由守卫的概念。这些技能将为你构建动态、复杂的单页面应用提供强大支持。
练习
- 基于你之前的Todo应用,添加几个页面,例如待办事项列表和完成状态的详细信息页面,使用Vue Router管理这些路由。
- 实现动态路由,通过URL参数显示不同的待办事项内容。
- 使用路由守卫保护某些路由,确保在适当的条件下用户才能访问。
通过今天的学习,相信你对Vue Router有了更清晰的认识。在接下来的日子里,我们将探索更高级的主题,包括状态管理、异步操作等。继续保持学习热情,明天见!
相关文章:
Vue 3 30天精进之旅:Day 10 - Vue Router
在现代单页面应用(SPA)中,路由管理是必不可少的一部分。Vue Router是Vue.js官方的路由管理库,它使得在Vue应用中实现路由变得简单而灵活。今天的学习将围绕以下几个方面展开: Vue Router概述安装和基本配置定义路由路…...
人工智能如何驱动SEO关键词优化策略的转型与效果提升
内容概要 随着数字化时代的到来,人工智能(AI)技术对各行各业的影响日益显著,在搜索引擎优化(SEO)领域尤为如此。AI的应用不仅改变了关键词研究的方法,而且提升了内容生成和搜索优化的效率&…...
keil5如何添加.h 和.c文件,以及如何添加文件夹
1.简介 在hal库的编程中我们一般会生成如下的几个文件夹,在这几个文件夹内存储着各种外设所需要的函数接口.h文件,和实现函数具体功能的.c文件,但是有时我们想要创建自己的文件夹并在这些文件夹下面创造.h .c文件来实现某些功能,…...
BMC PSL function(22)-printf()
printf() 含义:Print text formatted to the C library printf() routine specification Format printf(format,[arg1,......,argn]) Parameter ParameterDefinitionformattext, variable names, and control characters that specify the content and format of output t…...
【数据结构】_复杂度
目录 1. 算法效率 2. 时间复杂度 2.1 时间复杂度概念 2.2 准确的时间复杂度函数式 2.3 大O渐进表示法 2.4 时间复杂度的常见量级 2.5 时间复杂度示例 3. 空间复杂度 3.1 空间复杂度概念 3.2 空间复杂度示例 1. 算法效率 一般情况下,衡量一个算法的好坏是…...
pytorch实现循环神经网络
人工智能例子汇总:AI常见的算法和例子-CSDN博客 PyTorch 提供三种主要的 RNN 变体: nn.RNN:最基本的循环神经网络,适用于短时依赖任务。nn.LSTM:长短时记忆网络,适用于长序列数据,能有效解决…...
Java 16进制 10进制 2进制数 相互的转换
在 Java 中,进行进制之间的转换时,除了功能的正确性外,效率和安全性也很重要。为了确保高效和相对安全的转换,我们通常需要考虑: 性能:使用内置的转换方法,如 Integer.toHexString()、Integer.…...
力扣动态规划-14【算法学习day.108】
前言 ###我做这类文章一个重要的目的还是给正在学习的大家提供方向(例如想要掌握基础用法,该刷哪些题?建议灵神的题单和代码随想录)和记录自己的学习过程,我的解析也不会做的非常详细,只会提供思路和一些关…...
数据结构day02
1 线性表的定义和基本操作 1.1 线性表的定义 分析: 1.1.1 问题一:我们为什么探讨线性表的定义和基本操作 在研究数据结构时,需要重点关注三个方面:逻辑结构、物理结构以及数据的运算。在本节内容里,我们首先来介绍线…...
随笔 | 写在一月的最后一天
. 前言 这个月比预想中过的要快更多。突然回看这一个月,还有点不知从何提笔。 整个一月可以总结为以下几个关键词: 期许,保持期许出现休息 . 期许 关于期许,没有什么时候比一年伊始更适合设立目标和计划的了。但令人惭愧的…...
JVM方法区
一、栈、堆、方法区的交互关系 二、方法区的理解: 尽管所有的方法区在逻辑上属于堆的一部分,但是一些简单的实现可能不会去进行垃圾收集或者进行压缩,方法区可以看作是一块独立于Java堆的内存空间。 方法区(Method Area)与Java堆一样,是各个…...
一文读懂fgc之cms
一文读懂 fgc之cms-实战篇 1. 前言 线上应用运行过程中可能会出现内存使用率较高,甚至达到95仍然不触发fgc的情况,存在内存打满风险,持续触发fgc回收;或者内存占用率较低时触发了fgc,导致某些接口tp99,tp…...
MYSQL 商城系统设计 商品数据表的设计 商品 商品类别 商品选项卡 多表查询
介绍 在开发商品模块时,通常使用分表的方式进行查询以及关联。在通过表连接的方式进行查询。每个商品都有不同的分类,每个不同分类下面都有商品规格可以选择,每个商品分类对应商品规格都有自己的价格和库存。在实际的开发中应该给这些表进行…...
HTB:Administrator[WriteUP]
目录 连接至HTB服务器并启动靶机 信息收集 使用rustscan对靶机TCP端口进行开放扫描 将靶机TCP开放端口号提取并保存 使用nmap对靶机TCP开放端口进行脚本、服务扫描 使用nmap对靶机TCP开放端口进行漏洞、系统扫描 使用nmap对靶机常用UDP端口进行开放扫描 使用nmap对靶机…...
开源项目Umami网站统计MySQL8.0版本Docker+Linux安装部署教程
Umami是什么? Umami是一个开源项目,简单、快速、专注用户隐私的网站统计项目。 下面来介绍如何本地安装部署Umami项目,进行你的网站统计接入。特别对于首次使用docker的萌新有非常好的指导、参考和帮助作用。 Umami的github和docker镜像地…...
FBX SDK的使用:基础知识
Windows环境配置 FBX SDK安装后,目录下有三个文件夹: include 头文件lib 编译的二进制库,根据你项目的配置去包含相应的库samples 官方使用案列 动态链接 libfbxsdk.dll, libfbxsdk.lib是动态库,需要在配置属性->C/C->预…...
VisionMamba安装
1.安装python环境 conda create -n mamba python3.10.13 -y conda activate mamba2.安装torch环境 conda install cudatoolkit11.8 -c nvidia pip install torch2.1.1 torchvision0.16.1 torchaudio2.1.1 --index-url https://download.pytorch.org/whl/cu1183.安装其他包 c…...
h2oGPT
文章目录 一、关于 h2oGPT二、现场演示特点 三、开始行动安装h2oGPT拼贴画演示资源文档指南开发致谢为什么选择 H2O.ai?免责声明 一、关于 h2oGPT 使用文档、图像、视频等与本地GPT进行私人聊天。100%私人,Apache 2.0。支持oLLaMa、Mixtral、llama. cpp…...
Win10安装MySQL、Pycharm连接MySQL,Pycharm中运行Django
一、Windows系统mysql相关操作 1、 检查系统是否安装mysql 按住win r (调出运行窗口) 输入service.msc,点击【确定】 image.png 打开服务列表-检查是否有mysql服务 (compmgmt.msc) image.png 2、 Windows安装MySQL …...
使用Pygame制作“俄罗斯方块”游戏
1. 前言 俄罗斯方块(Tetris) 是一款由方块下落、行消除等核心规则构成的经典益智游戏: 每次从屏幕顶部出现一个随机的方块(由若干小方格组成),玩家可以左右移动或旋转该方块,让它合适地堆叠在…...
【位运算】消失的两个数字(hard)
消失的两个数字(hard) 题⽬描述:解法(位运算):Java 算法代码:更简便代码 题⽬链接:⾯试题 17.19. 消失的两个数字 题⽬描述: 给定⼀个数组,包含从 1 到 N 所有…...
理解 MCP 工作流:使用 Ollama 和 LangChain 构建本地 MCP 客户端
🌟 什么是 MCP? 模型控制协议 (MCP) 是一种创新的协议,旨在无缝连接 AI 模型与应用程序。 MCP 是一个开源协议,它标准化了我们的 LLM 应用程序连接所需工具和数据源并与之协作的方式。 可以把它想象成你的 AI 模型 和想要使用它…...
大语言模型(LLM)中的KV缓存压缩与动态稀疏注意力机制设计
随着大语言模型(LLM)参数规模的增长,推理阶段的内存占用和计算复杂度成为核心挑战。传统注意力机制的计算复杂度随序列长度呈二次方增长,而KV缓存的内存消耗可能高达数十GB(例如Llama2-7B处理100K token时需50GB内存&a…...
Fabric V2.5 通用溯源系统——增加图片上传与下载功能
fabric-trace项目在发布一年后,部署量已突破1000次,为支持更多场景,现新增支持图片信息上链,本文对图片上传、下载功能代码进行梳理,包含智能合约、后端、前端部分。 一、智能合约修改 为了增加图片信息上链溯源,需要对底层数据结构进行修改,在此对智能合约中的农产品数…...
安宝特案例丨Vuzix AR智能眼镜集成专业软件,助力卢森堡医院药房转型,赢得辉瑞创新奖
在Vuzix M400 AR智能眼镜的助力下,卢森堡罗伯特舒曼医院(the Robert Schuman Hospitals, HRS)凭借在无菌制剂生产流程中引入增强现实技术(AR)创新项目,荣获了2024年6月7日由卢森堡医院药剂师协会࿰…...
【C++特殊工具与技术】优化内存分配(一):C++中的内存分配
目录 一、C 内存的基本概念 1.1 内存的物理与逻辑结构 1.2 C 程序的内存区域划分 二、栈内存分配 2.1 栈内存的特点 2.2 栈内存分配示例 三、堆内存分配 3.1 new和delete操作符 4.2 内存泄漏与悬空指针问题 4.3 new和delete的重载 四、智能指针…...
Go语言多线程问题
打印零与奇偶数(leetcode 1116) 方法1:使用互斥锁和条件变量 package mainimport ("fmt""sync" )type ZeroEvenOdd struct {n intzeroMutex sync.MutexevenMutex sync.MutexoddMutex sync.Mutexcurrent int…...
适应性Java用于现代 API:REST、GraphQL 和事件驱动
在快速发展的软件开发领域,REST、GraphQL 和事件驱动架构等新的 API 标准对于构建可扩展、高效的系统至关重要。Java 在现代 API 方面以其在企业应用中的稳定性而闻名,不断适应这些现代范式的需求。随着不断发展的生态系统,Java 在现代 API 方…...
[特殊字符] 手撸 Redis 互斥锁那些坑
📖 手撸 Redis 互斥锁那些坑 最近搞业务遇到高并发下同一个 key 的互斥操作,想实现分布式环境下的互斥锁。于是私下顺手手撸了个基于 Redis 的简单互斥锁,也顺便跟 Redisson 的 RLock 机制对比了下,记录一波,别踩我踩过…...
精益数据分析(98/126):电商转化率优化与网站性能的底层逻辑
精益数据分析(98/126):电商转化率优化与网站性能的底层逻辑 在电子商务领域,转化率与网站性能是决定商业成败的核心指标。今天,我们将深入解析不同类型电商平台的转化率基准,探讨页面加载速度对用户行为的…...
