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

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的核心功能,并将其应用于实际项目中。

相关文章:

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

Vue Router是Vue.js官方的路由管理器,它和Vue.js的核心深度集成,让构建单页应用变得轻而易举。 动态路由 动态路由允许你在路由路径中使用变量,这些变量可以从实际的URL中获取,并传递给对应的路由组件。 定义动态路由 在route…...

江科大/江协科技 STM32学习笔记P9-11

文章目录 OLED1、OLED硬件main.c EXTI外部中断1、中断系统2、中断执行流程图3、STM32中断4、中断地址的作用5、EXTI6、EXTI基本结构7、AFIO复用IO口8、EXTI框图或门和与门 9、旋转编码器介绍10、硬件电路 OLED 1、OLED硬件 SCL和SDA是I2C的通信引脚,需要接在单片机…...

【培训通知】成为Power BI数据分析可视化实战第一人,加入3天直播即可

Power BI数据分析可视化实战课程培训是一门旨在提升学员在数据分析与可视化领域能力的专业课程。以下是对该培训课程的详细介绍: 一、课程概述 Power BI 是一种业务分析服务,能够提供深入的见解,帮助用户实现快速、明智的决策。该课程通过实…...

24暑假算法刷题 | Day22 | LeetCode 77. 组合,216. 组合总和 III,17. 电话号码的字母组合

目录 77. 组合题目描述题解 216. 组合总和 III题目描述题解 17. 电话号码的字母组合题目描述题解 77. 组合 点此跳转题目链接 题目描述 给定两个整数 n 和 k,返回范围 [1, n] 中所有可能的 k 个数的组合。 你可以按 任何顺序 返回答案。 示例 1: 输…...

一篇文章告诉你对讲机为什么不能被手机取代的7个原因

在智能时代,手机几乎无处不在,涵盖了从基本通信到多媒体娱乐的一切功能。然而,即使在这种情况下,对讲机仍然没有被完全取代。这不仅仅是出于怀旧或专业需求,还有许多实质性的原因使得对讲机在特定领域和情况下仍然保持…...

LION论文阅读

一、论文主要出发点 3D目标检测的性能受限于3D卷积的局部感受野。 Transformer在3D检测领域效果很好,但由于算力限制,已有的工作在pillar内,或将voxel分组在组内进行特征交互,阻碍了他们捕捉更远程的依赖关系。 线性RNN算子的计…...

在Android上实现汉字笔顺动画效果——HanZiWriter

序,万般皆是命,半点不由人。 Hanzi Writer 是 javascript 免费开源库,根据汉字书写时按照笔画顺序的特征,可以播放正确笔画顺序的描边动画和练习测试。支持简体字和繁体字。可以让全球用户能够通过手绘模仿的方式来学习和练习书写…...

黑马头条vue2.0项目实战(一)——项目初始化

1. 图标素材(iconfont简介) 制作字体图标的工具有很多,推荐使用:iconfont-阿里巴巴矢量图标库。 注册账户 创建项目 可以根据项目自定义 class 前缀 上传图标到项目 生成链接,复制 css 代码,在项目中使用…...

Unity Shader动画:用代码绘制动态视觉效果

在Unity中,Shader是运行在GPU上的小程序,用于控制顶点和像素的渲染过程。通过编写自定义Shader,开发者可以创造出各种令人惊叹的动画效果,从简单的颜色变化到复杂的流体模拟。本文将探讨如何使用Unity Shader来实现动画效果。 Sh…...

智税集成2.0生成凭证

:::info 💡 整体业务流程 从A9服务器中取数,生成列表数据,写入到对方oracle数据库中。 ::: 项目关键点 1.连接数据库 左连接连接本地SQLserver数据库、右连接要链接A9开票服务器的数据库然后设想用SQLserver 自带的外部连接来连接oracle数据…...

B4005 [GESP202406 四级] 黑白方块 【暴力枚举】【前缀和】

#include<bits/stdc.h> using namespace std; int n,m,ans,tmp; char mp[20][20]; int cheak(int a,int b,int c,int d){//a<c b<dint cnt0;//枚举矩阵中的每个点 for(int ia;i<c;i)for(int jb;j<d;j)if(mp[i][j]1) cnt;//统计黑格的个数 return 2*cnt(c-a1…...

深度学习趋同性的量化探索:以多模态学习与联合嵌入为例

深度学习趋同性的量化探索&#xff1a;以多模态学习与联合嵌入为例 参考文献 据说是2024年最好的人工智能论文&#xff0c;是否有划时代的意义&#xff1f; [2405.07987] The Platonic Representation Hypothesis (arxiv.org) ​arxiv.org/abs/2405.07987 趋同性的量化表达 …...

决策树与随机森林:比较与应用场景分析

决策树与随机森林&#xff1a;比较与应用场景分析 引言 决策树和随机森林是机器学习中广泛使用的两种算法&#xff0c;因其简单性和强大的功能而被广泛采用。决策树是一种树形结构的决策模型&#xff0c;易于理解和解释。随机森林则是通过集成多棵决策树来提高预测性能的模型…...

C#用Aspose.Cells导出Excel,.NET导出Excel

ASP.NET MVC 控制器里面Action处理&#xff0c;下载文件&#xff0c;输出文件流 public async Task<ActionResult> ExportNewsAuthorFee(string deptId, DateTime? startDate, DateTime? endDate){if (startDate null){startDate DateTime.Parse(DateTime.Now.Year …...

天猫番茄品类TOP1,复购率超40%,「一颗大」如何策划极致产品力?

桔子要买什么品牌&#xff1f;桃子买什么品牌&#xff1f;土豆买什么品牌&#xff1f;过去人们购买农产品几乎没有品牌意识。但近年来可能某些人买猕猴桃时会考虑佳沛&#xff0c;这是一个在全球达到30%猕猴桃市场的新西兰品牌。与此类似&#xff0c;一个国产品牌「一颗大™」正…...

Docker搭建私有仓库harbor(docker 镜像仓库搭建)

Harbor介绍 Docker容器应用的开发和运行离不开可靠的镜像管理&#xff0c;虽然Docker官方也提供了公共的镜像仓库&#xff0c;但是从安全和效率等方面考虑&#xff0c;部署我们私有环境内的Registry也是非常必要的。Harbor是由VMware公司开源的企业级的Docker Registry管理项目…...

面试题:MySQL 索引

1. 谈一下你对于MySQL索引的理解?(为什么MySQL要选择B+树来存储索引) MySQL的索引选择B+树作为数据结构来进行存储,使用B+树的本质原因在于可以减少IO次数,提高查询的效率,简单来说就是可以保证在树的高度不变的情况下存储更多的数据: IO效率的提高:在MySQL数据库中,…...

云计算day13

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

2024年孝感中级职称报名开始了吗?

2024年孝感中级职称申报终于开始了&#xff0c;之前参加过水测的小伙伴们&#xff0c;开始准备评审了 2024年孝感本批次申报时间&#xff1a;中级、初级职称网上申报时间:2024年8月1日至8月31日。 注意&#xff1a;个人通过“湖北省职称评审管理信息系统”申报&#xff0c;须先…...

RAG技术之Router

Router有什么用&#xff1f; 在RAG应用中&#xff0c;Router可以帮助我们基于用户的查询意图来决定使用何种数据类型或数据源&#xff0c;比如是否需要进行语义检索、是否需要进行text2sql查询&#xff0c;是否需要用function call来进行API调用。 Router也可以根据用户的查询…...

调用支付宝接口响应40004 SYSTEM_ERROR问题排查

在对接支付宝API的时候&#xff0c;遇到了一些问题&#xff0c;记录一下排查过程。 Body:{"datadigital_fincloud_generalsaas_face_certify_initialize_response":{"msg":"Business Failed","code":"40004","sub_msg…...

mongodb源码分析session执行handleRequest命令find过程

mongo/transport/service_state_machine.cpp已经分析startSession创建ASIOSession过程&#xff0c;并且验证connection是否超过限制ASIOSession和connection是循环接受客户端命令&#xff0c;把数据流转换成Message&#xff0c;状态转变流程是&#xff1a;State::Created 》 St…...

css的定位(position)详解:相对定位 绝对定位 固定定位

在 CSS 中&#xff0c;元素的定位通过 position 属性控制&#xff0c;共有 5 种定位模式&#xff1a;static&#xff08;静态定位&#xff09;、relative&#xff08;相对定位&#xff09;、absolute&#xff08;绝对定位&#xff09;、fixed&#xff08;固定定位&#xff09;和…...

涂鸦T5AI手搓语音、emoji、otto机器人从入门到实战

“&#x1f916;手搓TuyaAI语音指令 &#x1f60d;秒变表情包大师&#xff0c;让萌系Otto机器人&#x1f525;玩出智能新花样&#xff01;开整&#xff01;” &#x1f916; Otto机器人 → 直接点明主体 手搓TuyaAI语音 → 强调 自主编程/自定义 语音控制&#xff08;TuyaAI…...

安卓基础(aar)

重新设置java21的环境&#xff0c;临时设置 $env:JAVA_HOME "D:\Android Studio\jbr" 查看当前环境变量 JAVA_HOME 的值 echo $env:JAVA_HOME 构建ARR文件 ./gradlew :private-lib:assembleRelease 目录是这样的&#xff1a; MyApp/ ├── app/ …...

C++:多态机制详解

目录 一. 多态的概念 1.静态多态&#xff08;编译时多态&#xff09; 二.动态多态的定义及实现 1.多态的构成条件 2.虚函数 3.虚函数的重写/覆盖 4.虚函数重写的一些其他问题 1&#xff09;.协变 2&#xff09;.析构函数的重写 5.override 和 final关键字 1&#…...

排序算法总结(C++)

目录 一、稳定性二、排序算法选择、冒泡、插入排序归并排序随机快速排序堆排序基数排序计数排序 三、总结 一、稳定性 排序算法的稳定性是指&#xff1a;同样大小的样本 **&#xff08;同样大小的数据&#xff09;**在排序之后不会改变原始的相对次序。 稳定性对基础类型对象…...

基于SpringBoot在线拍卖系统的设计和实现

摘 要 随着社会的发展&#xff0c;社会的各行各业都在利用信息化时代的优势。计算机的优势和普及使得各种信息系统的开发成为必需。 在线拍卖系统&#xff0c;主要的模块包括管理员&#xff1b;首页、个人中心、用户管理、商品类型管理、拍卖商品管理、历史竞拍管理、竞拍订单…...

人工智能--安全大模型训练计划:基于Fine-tuning + LLM Agent

安全大模型训练计划&#xff1a;基于Fine-tuning LLM Agent 1. 构建高质量安全数据集 目标&#xff1a;为安全大模型创建高质量、去偏、符合伦理的训练数据集&#xff0c;涵盖安全相关任务&#xff08;如有害内容检测、隐私保护、道德推理等&#xff09;。 1.1 数据收集 描…...

通过MicroSip配置自己的freeswitch服务器进行调试记录

之前用docker安装的freeswitch的&#xff0c;启动是正常的&#xff0c; 但用下面的Microsip连接不上 主要原因有可能一下几个 1、通过下面命令可以看 [rootlocalhost default]# docker exec -it freeswitch fs_cli -x "sofia status profile internal"Name …...