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

Vue 3 30天精进之旅:Day 10 - Vue Router

在现代单页面应用(SPA)中,路由管理是必不可少的一部分。Vue Router是Vue.js官方的路由管理库,它使得在Vue应用中实现路由变得简单而灵活。今天的学习将围绕以下几个方面展开:

  1. Vue Router概述
  2. 安装和基本配置
  3. 定义路由
  4. 路由视图和路由链接
  5. 嵌套路由
  6. 路由传参
  7. 页面导航和路由守卫
  8. 总结与实践

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,我们创建了基本的路由和导航,并掌握了嵌套路由、参数传递及路由守卫的概念。这些技能将为你构建动态、复杂的单页面应用提供强大支持。

练习

  1. 基于你之前的Todo应用,添加几个页面,例如待办事项列表和完成状态的详细信息页面,使用Vue Router管理这些路由。
  2. 实现动态路由,通过URL参数显示不同的待办事项内容。
  3. 使用路由守卫保护某些路由,确保在适当的条件下用户才能访问。

通过今天的学习,相信你对Vue Router有了更清晰的认识。在接下来的日子里,我们将探索更高级的主题,包括状态管理、异步操作等。继续保持学习热情,明天见!

相关文章:

Vue 3 30天精进之旅:Day 10 - Vue Router

在现代单页面应用&#xff08;SPA&#xff09;中&#xff0c;路由管理是必不可少的一部分。Vue Router是Vue.js官方的路由管理库&#xff0c;它使得在Vue应用中实现路由变得简单而灵活。今天的学习将围绕以下几个方面展开&#xff1a; Vue Router概述安装和基本配置定义路由路…...

人工智能如何驱动SEO关键词优化策略的转型与效果提升

内容概要 随着数字化时代的到来&#xff0c;人工智能&#xff08;AI&#xff09;技术对各行各业的影响日益显著&#xff0c;在搜索引擎优化&#xff08;SEO&#xff09;领域尤为如此。AI的应用不仅改变了关键词研究的方法&#xff0c;而且提升了内容生成和搜索优化的效率&…...

keil5如何添加.h 和.c文件,以及如何添加文件夹

1.简介 在hal库的编程中我们一般会生成如下的几个文件夹&#xff0c;在这几个文件夹内存储着各种外设所需要的函数接口.h文件&#xff0c;和实现函数具体功能的.c文件&#xff0c;但是有时我们想要创建自己的文件夹并在这些文件夹下面创造.h .c文件来实现某些功能&#xff0c;…...

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. 算法效率 一般情况下&#xff0c;衡量一个算法的好坏是…...

pytorch实现循环神经网络

人工智能例子汇总&#xff1a;AI常见的算法和例子-CSDN博客 PyTorch 提供三种主要的 RNN 变体&#xff1a; nn.RNN&#xff1a;最基本的循环神经网络&#xff0c;适用于短时依赖任务。nn.LSTM&#xff1a;长短时记忆网络&#xff0c;适用于长序列数据&#xff0c;能有效解决…...

Java 16进制 10进制 2进制数 相互的转换

在 Java 中&#xff0c;进行进制之间的转换时&#xff0c;除了功能的正确性外&#xff0c;效率和安全性也很重要。为了确保高效和相对安全的转换&#xff0c;我们通常需要考虑&#xff1a; 性能&#xff1a;使用内置的转换方法&#xff0c;如 Integer.toHexString()、Integer.…...

力扣动态规划-14【算法学习day.108】

前言 ###我做这类文章一个重要的目的还是给正在学习的大家提供方向&#xff08;例如想要掌握基础用法&#xff0c;该刷哪些题&#xff1f;建议灵神的题单和代码随想录&#xff09;和记录自己的学习过程&#xff0c;我的解析也不会做的非常详细&#xff0c;只会提供思路和一些关…...

数据结构day02

1 线性表的定义和基本操作 1.1 线性表的定义 分析&#xff1a; 1.1.1 问题一&#xff1a;我们为什么探讨线性表的定义和基本操作 在研究数据结构时&#xff0c;需要重点关注三个方面&#xff1a;逻辑结构、物理结构以及数据的运算。在本节内容里&#xff0c;我们首先来介绍线…...

随笔 | 写在一月的最后一天

. 前言 这个月比预想中过的要快更多。突然回看这一个月&#xff0c;还有点不知从何提笔。 整个一月可以总结为以下几个关键词&#xff1a; 期许&#xff0c;保持期许出现休息 . 期许 关于期许&#xff0c;没有什么时候比一年伊始更适合设立目标和计划的了。但令人惭愧的…...

JVM方法区

一、栈、堆、方法区的交互关系 二、方法区的理解: 尽管所有的方法区在逻辑上属于堆的一部分&#xff0c;但是一些简单的实现可能不会去进行垃圾收集或者进行压缩&#xff0c;方法区可以看作是一块独立于Java堆的内存空间。 方法区(Method Area)与Java堆一样&#xff0c;是各个…...

一文读懂fgc之cms

一文读懂 fgc之cms-实战篇 1. 前言 线上应用运行过程中可能会出现内存使用率较高&#xff0c;甚至达到95仍然不触发fgc的情况&#xff0c;存在内存打满风险&#xff0c;持续触发fgc回收&#xff1b;或者内存占用率较低时触发了fgc&#xff0c;导致某些接口tp99&#xff0c;tp…...

MYSQL 商城系统设计 商品数据表的设计 商品 商品类别 商品选项卡 多表查询

介绍 在开发商品模块时&#xff0c;通常使用分表的方式进行查询以及关联。在通过表连接的方式进行查询。每个商品都有不同的分类&#xff0c;每个不同分类下面都有商品规格可以选择&#xff0c;每个商品分类对应商品规格都有自己的价格和库存。在实际的开发中应该给这些表进行…...

HTB:Administrator[WriteUP]

目录 连接至HTB服务器并启动靶机 信息收集 使用rustscan对靶机TCP端口进行开放扫描 将靶机TCP开放端口号提取并保存 使用nmap对靶机TCP开放端口进行脚本、服务扫描 使用nmap对靶机TCP开放端口进行漏洞、系统扫描 使用nmap对靶机常用UDP端口进行开放扫描 使用nmap对靶机…...

开源项目Umami网站统计MySQL8.0版本Docker+Linux安装部署教程

Umami是什么&#xff1f; Umami是一个开源项目&#xff0c;简单、快速、专注用户隐私的网站统计项目。 下面来介绍如何本地安装部署Umami项目&#xff0c;进行你的网站统计接入。特别对于首次使用docker的萌新有非常好的指导、参考和帮助作用。 Umami的github和docker镜像地…...

FBX SDK的使用:基础知识

Windows环境配置 FBX SDK安装后&#xff0c;目录下有三个文件夹&#xff1a; include 头文件lib 编译的二进制库&#xff0c;根据你项目的配置去包含相应的库samples 官方使用案列 动态链接 libfbxsdk.dll, libfbxsdk.lib是动态库&#xff0c;需要在配置属性->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&#xff1f;免责声明 一、关于 h2oGPT 使用文档、图像、视频等与本地GPT进行私人聊天。100%私人&#xff0c;Apache 2.0。支持oLLaMa、Mixtral、llama. cpp…...

Win10安装MySQL、Pycharm连接MySQL,Pycharm中运行Django

一、Windows系统mysql相关操作 1、 检查系统是否安装mysql 按住win r &#xff08;调出运行窗口&#xff09; 输入service.msc&#xff0c;点击【确定】 image.png 打开服务列表-检查是否有mysql服务 &#xff08;compmgmt.msc&#xff09; image.png 2、 Windows安装MySQL …...

使用Pygame制作“俄罗斯方块”游戏

1. 前言 俄罗斯方块&#xff08;Tetris&#xff09; 是一款由方块下落、行消除等核心规则构成的经典益智游戏&#xff1a; 每次从屏幕顶部出现一个随机的方块&#xff08;由若干小方格组成&#xff09;&#xff0c;玩家可以左右移动或旋转该方块&#xff0c;让它合适地堆叠在…...

使用docker在3台服务器上搭建基于redis 6.x的一主两从三台均是哨兵模式

一、环境及版本说明 如果服务器已经安装了docker,则忽略此步骤,如果没有安装,则可以按照一下方式安装: 1. 在线安装(有互联网环境): 请看我这篇文章 传送阵>> 点我查看 2. 离线安装(内网环境):请看我这篇文章 传送阵>> 点我查看 说明&#xff1a;假设每台服务器已…...

【Axure高保真原型】引导弹窗

今天和大家中分享引导弹窗的原型模板&#xff0c;载入页面后&#xff0c;会显示引导弹窗&#xff0c;适用于引导用户使用页面&#xff0c;点击完成后&#xff0c;会显示下一个引导弹窗&#xff0c;直至最后一个引导弹窗完成后进入首页。具体效果可以点击下方视频观看或打开下方…...

Psychopy音频的使用

Psychopy音频的使用 本文主要解决以下问题&#xff1a; 指定音频引擎与设备&#xff1b;播放音频文件 本文所使用的环境&#xff1a; Python3.10 numpy2.2.6 psychopy2025.1.1 psychtoolbox3.0.19.14 一、音频配置 Psychopy文档链接为Sound - for audio playback — Psy…...

Module Federation 和 Native Federation 的比较

前言 Module Federation 是 Webpack 5 引入的微前端架构方案&#xff0c;允许不同独立构建的应用在运行时动态共享模块。 Native Federation 是 Angular 官方基于 Module Federation 理念实现的专为 Angular 优化的微前端方案。 概念解析 Module Federation (模块联邦) Modul…...

WordPress插件:AI多语言写作与智能配图、免费AI模型、SEO文章生成

厌倦手动写WordPress文章&#xff1f;AI自动生成&#xff0c;效率提升10倍&#xff01; 支持多语言、自动配图、定时发布&#xff0c;让内容创作更轻松&#xff01; AI内容生成 → 不想每天写文章&#xff1f;AI一键生成高质量内容&#xff01;多语言支持 → 跨境电商必备&am…...

HTML前端开发:JavaScript 常用事件详解

作为前端开发的核心&#xff0c;JavaScript 事件是用户与网页交互的基础。以下是常见事件的详细说明和用法示例&#xff1a; 1. onclick - 点击事件 当元素被单击时触发&#xff08;左键点击&#xff09; button.onclick function() {alert("按钮被点击了&#xff01;&…...

高防服务器能够抵御哪些网络攻击呢?

高防服务器作为一种有着高度防御能力的服务器&#xff0c;可以帮助网站应对分布式拒绝服务攻击&#xff0c;有效识别和清理一些恶意的网络流量&#xff0c;为用户提供安全且稳定的网络环境&#xff0c;那么&#xff0c;高防服务器一般都可以抵御哪些网络攻击呢&#xff1f;下面…...

C++ Visual Studio 2017厂商给的源码没有.sln文件 易兆微芯片下载工具加开机动画下载。

1.先用Visual Studio 2017打开Yichip YC31xx loader.vcxproj&#xff0c;再用Visual Studio 2022打开。再保侟就有.sln文件了。 易兆微芯片下载工具加开机动画下载 ExtraDownloadFile1Info.\logo.bin|0|0|10D2000|0 MFC应用兼容CMD 在BOOL CYichipYC31xxloaderDlg::OnIni…...

从 GreenPlum 到镜舟数据库:杭银消费金融湖仓一体转型实践

作者&#xff1a;吴岐诗&#xff0c;杭银消费金融大数据应用开发工程师 本文整理自杭银消费金融大数据应用开发工程师在StarRocks Summit Asia 2024的分享 引言&#xff1a;融合数据湖与数仓的创新之路 在数字金融时代&#xff0c;数据已成为金融机构的核心竞争力。杭银消费金…...

什么是VR全景技术

VR全景技术&#xff0c;全称为虚拟现实全景技术&#xff0c;是通过计算机图像模拟生成三维空间中的虚拟世界&#xff0c;使用户能够在该虚拟世界中进行全方位、无死角的观察和交互的技术。VR全景技术模拟人在真实空间中的视觉体验&#xff0c;结合图文、3D、音视频等多媒体元素…...