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) 是一款由方块下落、行消除等核心规则构成的经典益智游戏: 每次从屏幕顶部出现一个随机的方块(由若干小方格组成),玩家可以左右移动或旋转该方块,让它合适地堆叠在…...
云原生核心技术 (7/12): K8s 核心概念白话解读(上):Pod 和 Deployment 究竟是什么?
大家好,欢迎来到《云原生核心技术》系列的第七篇! 在上一篇,我们成功地使用 Minikube 或 kind 在自己的电脑上搭建起了一个迷你但功能完备的 Kubernetes 集群。现在,我们就像一个拥有了一块崭新数字土地的农场主,是时…...
iOS 26 携众系统重磅更新,但“苹果智能”仍与国行无缘
美国西海岸的夏天,再次被苹果点燃。一年一度的全球开发者大会 WWDC25 如期而至,这不仅是开发者的盛宴,更是全球数亿苹果用户翘首以盼的科技春晚。今年,苹果依旧为我们带来了全家桶式的系统更新,包括 iOS 26、iPadOS 26…...
进程地址空间(比特课总结)
一、进程地址空间 1. 环境变量 1 )⽤户级环境变量与系统级环境变量 全局属性:环境变量具有全局属性,会被⼦进程继承。例如当bash启动⼦进程时,环 境变量会⾃动传递给⼦进程。 本地变量限制:本地变量只在当前进程(ba…...
【Oracle APEX开发小技巧12】
有如下需求: 有一个问题反馈页面,要实现在apex页面展示能直观看到反馈时间超过7天未处理的数据,方便管理员及时处理反馈。 我的方法:直接将逻辑写在SQL中,这样可以直接在页面展示 完整代码: SELECTSF.FE…...
LeetCode - 394. 字符串解码
题目 394. 字符串解码 - 力扣(LeetCode) 思路 使用两个栈:一个存储重复次数,一个存储字符串 遍历输入字符串: 数字处理:遇到数字时,累积计算重复次数左括号处理:保存当前状态&a…...
【学习笔记】深入理解Java虚拟机学习笔记——第4章 虚拟机性能监控,故障处理工具
第2章 虚拟机性能监控,故障处理工具 4.1 概述 略 4.2 基础故障处理工具 4.2.1 jps:虚拟机进程状况工具 命令:jps [options] [hostid] 功能:本地虚拟机进程显示进程ID(与ps相同),可同时显示主类&#x…...
[免费]微信小程序问卷调查系统(SpringBoot后端+Vue管理端)【论文+源码+SQL脚本】
大家好,我是java1234_小锋老师,看到一个不错的微信小程序问卷调查系统(SpringBoot后端Vue管理端)【论文源码SQL脚本】,分享下哈。 项目视频演示 【免费】微信小程序问卷调查系统(SpringBoot后端Vue管理端) Java毕业设计_哔哩哔哩_bilibili 项…...
Linux部署私有文件管理系统MinIO
最近需要用到一个文件管理服务,但是又不想花钱,所以就想着自己搭建一个,刚好我们用的一个开源框架已经集成了MinIO,所以就选了这个 我这边对文件服务性能要求不是太高,单机版就可以 安装非常简单,几个命令就…...
恶补电源:1.电桥
一、元器件的选择 搜索并选择电桥,再multisim中选择FWB,就有各种型号的电桥: 电桥是用来干嘛的呢? 它是一个由四个二极管搭成的“桥梁”形状的电路,用来把交流电(AC)变成直流电(DC)。…...
针对药品仓库的效期管理问题,如何利用WMS系统“破局”
案例: 某医药分销企业,主要经营各类药品的批发与零售。由于药品的特殊性,效期管理至关重要,但该企业一直面临效期问题的困扰。在未使用WMS系统之前,其药品入库、存储、出库等环节的效期管理主要依赖人工记录与检查。库…...
