当前位置: 首页 > 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;让它合适地堆叠在…...

基于距离变化能量开销动态调整的WSN低功耗拓扑控制开销算法matlab仿真

目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.算法仿真参数 5.算法理论概述 6.参考文献 7.完整程序 1.程序功能描述 通过动态调整节点通信的能量开销&#xff0c;平衡网络负载&#xff0c;延长WSN生命周期。具体通过建立基于距离的能量消耗模型&am…...

React Native在HarmonyOS 5.0阅读类应用开发中的实践

一、技术选型背景 随着HarmonyOS 5.0对Web兼容层的增强&#xff0c;React Native作为跨平台框架可通过重新编译ArkTS组件实现85%以上的代码复用率。阅读类应用具有UI复杂度低、数据流清晰的特点。 二、核心实现方案 1. 环境配置 &#xff08;1&#xff09;使用React Native…...

Vue2 第一节_Vue2上手_插值表达式{{}}_访问数据和修改数据_Vue开发者工具

文章目录 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染2. 插值表达式{{}}3. 访问数据和修改数据4. vue响应式5. Vue开发者工具--方便调试 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染 准备容器引包创建Vue实例 new Vue()指定配置项 ->渲染数据 准备一个容器,例如: …...

学习STC51单片机31(芯片为STC89C52RCRC)OLED显示屏1

每日一言 生活的美好&#xff0c;总是藏在那些你咬牙坚持的日子里。 硬件&#xff1a;OLED 以后要用到OLED的时候找到这个文件 OLED的设备地址 SSD1306"SSD" 是品牌缩写&#xff0c;"1306" 是产品编号。 驱动 OLED 屏幕的 IIC 总线数据传输格式 示意图 …...

【Java_EE】Spring MVC

目录 Spring Web MVC ​编辑注解 RestController RequestMapping RequestParam RequestParam RequestBody PathVariable RequestPart 参数传递 注意事项 ​编辑参数重命名 RequestParam ​编辑​编辑传递集合 RequestParam 传递JSON数据 ​编辑RequestBody ​…...

自然语言处理——Transformer

自然语言处理——Transformer 自注意力机制多头注意力机制Transformer 虽然循环神经网络可以对具有序列特性的数据非常有效&#xff0c;它能挖掘数据中的时序信息以及语义信息&#xff0c;但是它有一个很大的缺陷——很难并行化。 我们可以考虑用CNN来替代RNN&#xff0c;但是…...

浅谈不同二分算法的查找情况

二分算法原理比较简单&#xff0c;但是实际的算法模板却有很多&#xff0c;这一切都源于二分查找问题中的复杂情况和二分算法的边界处理&#xff0c;以下是博主对一些二分算法查找的情况分析。 需要说明的是&#xff0c;以下二分算法都是基于有序序列为升序有序的情况&#xf…...

【HarmonyOS 5 开发速记】如何获取用户信息(头像/昵称/手机号)

1.获取 authorizationCode&#xff1a; 2.利用 authorizationCode 获取 accessToken&#xff1a;文档中心 3.获取手机&#xff1a;文档中心 4.获取昵称头像&#xff1a;文档中心 首先创建 request 若要获取手机号&#xff0c;scope必填 phone&#xff0c;permissions 必填 …...

什么是Ansible Jinja2

理解 Ansible Jinja2 模板 Ansible 是一款功能强大的开源自动化工具&#xff0c;可让您无缝地管理和配置系统。Ansible 的一大亮点是它使用 Jinja2 模板&#xff0c;允许您根据变量数据动态生成文件、配置设置和脚本。本文将向您介绍 Ansible 中的 Jinja2 模板&#xff0c;并通…...

短视频矩阵系统文案创作功能开发实践,定制化开发

在短视频行业迅猛发展的当下&#xff0c;企业和个人创作者为了扩大影响力、提升传播效果&#xff0c;纷纷采用短视频矩阵运营策略&#xff0c;同时管理多个平台、多个账号的内容发布。然而&#xff0c;频繁的文案创作需求让运营者疲于应对&#xff0c;如何高效产出高质量文案成…...