Vue Router高级用法:动态路由与导航守卫

Vue Router是Vue.js官方的路由管理器,它和Vue.js的核心深度集成,让构建单页应用变得轻而易举。

动态路由

动态路由允许你在路由路径中使用变量,这些变量可以从实际的URL中获取,并传递给对应的路由组件。

定义动态路由

router.jsrouter/index.js中定义动态路由:

import Vue from 'vue';
import VueRouter from 'vue-router';
import User from './views/User.vue';Vue.use(VueRouter);export default new VueRouter({routes: [{path: '/user/:id',component: User,},],
});

这里,:id是一个动态段,它可以匹配任何字符串。

访问动态参数

在对应的组件中,你可以通过$route.params访问动态参数:

export default {data() {return {};},created() {console.log(this.$route.params.id);},
};

嵌套路由

嵌套路由允许你定义子路由,这些子路由可以在父路由的路径下被访问。

import Vue from 'vue';
import VueRouter from 'vue-router';
import User from './views/User.vue';
import Posts from './views/Posts.vue';
import Post from './views/Post.vue';Vue.use(VueRouter);export default new VueRouter({routes: [{path: '/user/:id',component: User,children: [{path: 'posts',component: Posts,},{path: 'posts/:postId',component: Post,},],},],
});

导航守卫

导航守卫是在路由发生改变前进行某些操作的机制,包括全局守卫、组件内的守卫和异步路由独享守卫。

全局前置守卫

全局前置守卫在路由跳转之前执行,可以用来控制导航:

router.beforeEach((to, from, next) => {if (to.matched.some(record => record.meta.requiresAuth)) {if (!auth.loggedIn()) {next({path: '/login',query: { redirect: to.fullPath }})} else {next()}} else {next() // 确保一定要调用 next()!}
})
组件内的守卫

组件内的守卫包括beforeRouteEnterbeforeRouteUpdate,它们分别在进入和更新路由时执行:

export default {beforeRouteEnter(to, from, next) {// 在渲染该组件的对应路由被 confirm 前调用// 不!能!获取组件实例 `this`// 因为当守卫执行前,组件实例还没被创建next(vm => {// 通过 `vm` 访问组件实例vm.title = to.params.id})},beforeRouteUpdate(to, from, next) {// 在当前路由改变,但是该组件被复用时调用// 举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候,// 由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。// 可以访问组件实例 `this`this.title = to.params.idnext()},
}
异步路由独享守卫

异步路由独享守卫在异步加载的路由组件中使用,可以用来控制路由的加载:

{path: '/foo',component: () => import(/* webpackChunkName: "group-foo" */ './Foo'),beforeEnter: (to, from, next) => {// ...}
}

实战案例:用户认证系统

假设我们有一个用户认证系统,只有登录用户才能访问特定的页面。我们可以使用导航守卫来实现这一功能:

import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from './views/Home.vue';
import Profile from './views/Profile.vue';
import Login from './views/Login.vue';Vue.use(VueRouter);const router = new VueRouter({routes: [{ path: '/', component: Home },{path: '/profile',component: Profile,meta: { requiresAuth: true },},{ path: '/login', component: Login },],
});router.beforeEach((to, from, next) => {if (to.matched.some(record => record.meta.requiresAuth)) {if (!auth.loggedIn()) {next({path: '/login',query: { redirect: to.fullPath },});} else {next();}} else {next(); // 确保一定要调用 next()!}
});export default router;

在这个例子中,我们定义了一个全局前置守卫,检查用户是否已登录。如果用户试图访问需要认证的页面但尚未登录,他们将被重定向到登录页面。

总结

Vue Router的动态路由和导航守卫机制为构建复杂单页应用提供了强大的工具。动态路由使你能够根据实际URL中的参数灵活地调整组件的行为,而导航守卫则允许你在路由跳转前后执行自定义逻辑,如权限检查、数据预取等。通过本教程的学习,你应该能够掌握Vue Router的核心功能,并将其应用于实际项目中。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/50196.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

学习测试12-车(略)

系统讲解,可以在懂车帝网站去了解汽车结构

DMv8共享存储集群部署

DMv8共享存储集群部署 环境说明 操作系统:centos7.6 服务器:2台虚拟机 达梦数据库版本:达梦V8 安装前准备工作 参考达梦官方文档:https://eco.dameng.com/document/dm/zh-cn/ops/DSC-installation-cluster.html#%E4%B8%80%E3…

如何为 DigitalOcean 上的托管数据库收集可观测指标

DigitalOcean 在 2024 年 5 月开始支持在托管数据库(PostgreSQL、MySQL、Redis和Kafka)中收集可观测指标。我们将在本偏内容中,告诉大家如何使用部署在 DigitalOcean App Platform 上的网络应用程序,为 DigitalOcean 上的 Postgre…

数据恢复教程:如何从硬盘、SD存储卡、数码相机中恢复误删除数据。

您正在摆弄 Android 设备。突然,您意外删除了一张或多张图片。不用担心,您总能找到一款价格实惠的数据恢复应用。这款先进的软件可帮助 Android 用户从硬盘、安全数字 (SD) 或存储卡以及数码相机中恢复已删除的数据。 Android 上数据被删除的主要原因 在…

【PostgreSQL案例】我要查的表没有在执行计划中

问题:查的表没有在执行计划中 sql: SELECT* FROM(SELECTA.column1 as "column1",--中间省略很多A字段A.column99 as "column99"fromtable_a Aleft join (SELECTlzl_idfromtable_a AAinner join table_b BB ON AA.lzl_key BB.lzl_…

Failed to activate conda environment

问题描述 Pycharm Terminal显示以下错误,导致无法自动激活当前项目的conda环境 Failed : 无法将“Failed”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写,如果包括路径,请确保路径正确,然后再试一次。 …

多GPU并行处理[任务分配、进程调度、资源管理、负载均衡]

1. 多GPU并行处理设计 设计思路: 实现基于多GPU的并行任务处理,每个GPU运行独立的任务,以加速整体的处理速度。 实现机制: 进程隔离: 利用multiprocessing.Process为每个GPU创建独立的工作进程。 GPU资源限制: 通过设置CUDA_VISIBLE_DEVICES环境变量&…

厚积薄发,详解 IoTeX 2.0 如何推动 DePIN 赛道迈向新台阶

背 景 DePIN 是加密货币行业的一个新兴垂直领域,也是本轮牛市最重要的叙事之一。DePIN 通常通过发行和分配代币来激励参与者,用户可以通过提供资源、维护网络、参与治理等方式获得代币奖励并产生直接的经济收益,从而重新洗牌财富分配方…

【Linux】网络通信基础:应用层协议、HTTP、序列化与会话管理

文章目录 前言1. 应用层自定义协议与序列化1.1 什么是应用层?1.2 再谈 "协议"1.3 序列化 和 反序列化 2. HTTP 协议3. 认识 URL(统一资源定位符)4. urlencode和urldecode5. HTTP 协议请求与响应格式5.1 HTTP 请求5.2 HTTP 响应 6. HTTP 的方法6.1 GET 方法…

50.TFT_LCD液晶屏驱动设计与验证(3)

(1)数据生成模块Verilog代码: module data_gen(input [9:0] hang ,input [9:0] lie ,input clk_33M ,input reset_n ,output reg [23:0] data ); //定义最大行、列parameter …

Git(分布式版本控制系统)(fourteen day)

一、分布式版本控制系统 1、Git概述 Git是一种分布式版本控制系统,用于跟踪和管理代码的变更,它由Linux、torvalds创建的,最初被设计用于Linux内核的开发。Git允许开发人员跟踪和管理代码的版本,并且可以在不同的开发人员之间进行…

mybatis-plus项目中使用mybatis插件

1. 确保项目添加MyBatis-Plus依赖以及适合的SpringBoot版本。 <dependency><groupId>com.baomidou</groupId><artifactId>mybatis-plus-boot-starter</artifactId><version>版本号</version> </dependency> 2. 创建mybatis自…

监控Windows文件夹下面的文件(C#和C++实现)

最近在做虚拟打印机时&#xff0c;需要实时监控打印文件的到达&#xff0c;并移动文件到另外的位置。一开始我使用了线程&#xff0c;在线程里去检测新文件的到达。实际上Windows提供了一个文件监控接口函数ReadDIrectoryChangesW。这个函数可以对所有文件操作进行监控。 ReadD…

SAP中生产版本维护

流程概述 本流程为生产版本主数据维护流程,当PBOM、工艺路线主数据维护完成后,方能进行此流程。由于S/4HANA系统中,生产版本被定义为BOM展开的必要条件,因此所有工厂都必须在运行物料需求计划与生产执行等流程前将生产版本维护完成,与此同时,生产版本数据还是财务模块发…

【C语言】数组栈的实现

栈的概念及结构 栈&#xff1a;一种特殊的线性表&#xff0c;其只允许在固定的一端进行插入和删除元素操作。进行数据插入和删除操作的一端 称为栈顶&#xff0c;另一端称为栈底。栈中的数据元素遵守后进先出LIFO&#xff08;Last In First Out&#xff09;的原则。 压栈&#…

学习大数据DAY24 Shell脚本的书写

目录 shell 的变量 系统变量 特殊变量 运算符 if 选择结构 ---then 独立一行 case 语句 等值判断 上机练习 10 附加题 for 循环 while 循环 乘法表(双层嵌套) 上机练习 11 把附加题代码修改为循环形式 shell 的变量 系统变量 $HOME : 当前登录用户的 " 家…

套接字选项、广播和组播

1. 套接字选项(socket options) 每一个套接字(socket)在不同的协议层次(级别)上面有不同的行为属性(选项) 我们可以设置 / 获取指定的套接字选项 getsockopt&#xff1a;获取套接字的选项 setsockopt&#xff1a;设置套接字的选项 NAMEgetsockopt, setsockopt - get and set op…

python自动化运维 通过paramiko库和time库实现服务器自动化管理

目录 一.前言 二. 代码实现以及解析 2.1导入必要的库 2.2定义服务器信息 2.3创建 SSH 客户端连接函数 2.4执行远程命令函数 2.5获取系统信息函数 2.6重启服务函数 2.7 主函数 三.致谢 一.前言 在数字化时代&#xff0c;IT 基础设施的规模和复杂性不断增长&am…

Hadoop集群安装配置

文章目录 Hadoop部署配置集群配置历史服务器配置日志的聚集分发Hadoop群起集群Hadoop群起脚本 准备工作&#xff1a;需要3台虚拟机&#xff0c;每台虚拟机搭建好JDK并配置环境变量 Hadoop部署 1&#xff09;集群部署规划 注意&#xff1a;NameNode和SecondaryNameNode不要安…

批处理操作系统、分时操作系统、实时操作系统

批处理操作系统&#xff1a; 特点&#xff1a;批处理操作系统主要用于处理一系列作业。作业是把程序、数据连同作业说明书组织起来的任务单位&#xff0c;这些作业被组织成批作业。系统将这些作业按顺序执行&#xff0c;用户在提交作业后通常不需要等待作业完成&#xff0c;而是…