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.rhkb.cn/news/384465.html

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

相关文章

GD 32 流水灯

前言: 通过后面的学习掌握了一些逻辑架构的知识,通过复习的方式将学到的裸机任务架构的知识运用起来,同时巩固前面学到的知识,GPIO的配置等。 开发板上LED引脚使用示意图 注:此次LED灯的点亮凡是是高电平点亮&#xff…

如何解决ChromeDriver 126找不到chromedriver.exe问题

引言 在使用Selenium和ChromeDriver进行网页自动化时,ChromeDriver与Chrome浏览器版本不匹配的问题时有发生。最近,许多开发者在使用ChromeDriver 126时遇到了无法找到chromedriver.exe文件的错误。本文将介绍该问题的原因,并提供详细的解决…

【第一天】计算机网络 TCP/IP模型和OSI模型,从输入URL到页面显示发生了什么

TCP/IP模型和OSI模型 这两个模型属于计算机网络的体系结构。 OSI模型是七层模型,从上到下包括: 应用层,表示层,会话层,传输层,网络层,数据链路层,物理层 TCP/IP模型是四层模型&…

uniapp原生插件开发实战——iOS打开文件到自己的app

用原生开发获取文件的名称、路径等能力封装为一个插件包供前端使用 首先根据ios插件开发教程,创建一个插件工程,template 选framework 开始编写代码: iOS 9 及以下版本会调用以下方法: - (BOOL)application:(UIApplication *_N…

关键词查找【Boyer-Moore 算法】

1、【Boyer-Moore 算法】 【算法】哪种算法有分数复杂度?- BoyerMoore字符串匹配_哔哩哔哩_bilibili BM算法的精华就在于BM(text, pattern),也就是BM算法当不匹配的时候一次性可以跳过不止一个字符。即它不需要对被搜索的字符串中的字符进行逐一比较,而…

HTML前端面试题之<iframe>标签

面试题:iframe 标签的作用是什么?有哪些优缺点 ? 讲真,刷这道面试题之前我根本没有接触过iframe,网课没讲过,项目实战没用过,但却在面试题里出现了!好吧,我只能说:前端路漫漫&…

2024年软件系统与信息处理国际会议(ICSSIP 2024)即将召开!

2024年软件系统与信息处理国际会议(ICSSIP 2024)将于2024年10月25-27日在中国昆明举行。引领技术前沿,共谋创新未来。ICSSIP 2024将汇聚来自世界各地的专家学者,他们将在会上分享最新的研究成果、技术突破及实践经验。会议议题涵盖…

DataEase一键部署:轻松搭建数据可视化平台

DataEase是一个开源的数据可视化和分析工具,旨在帮助用户轻松创建和共享数据仪表盘。它支持多种数据源,包括关系型数据库,文件数据源,NoSQL数据库等,提供强大的数据查询、处理和可视化功能。DataEase 不仅是一款数据可…

通信原理-思科实验四:静态路由项配置实验

实验四 静态路由项配置实验 一:实验内容 二:实验目的 三、实验原理 四、实验步骤 选择三个2811型号的路由器 R1、R2、R3 路由器默认只有两个快速以太网接口,为路由器R1和R3增加快速以太网接口模块NM-1FE-TX,安装后检查路由器的接…

【电源专题】结合锂电池相关资料和华为手机聊聊锂离子电池使用条件限制

在文章:【电源专题】锂电池的特点和工作原理 中我们讲到了一些关于锂电池种类和特点、工作原理等。但是对于锂离子电池使用条件限制却没有介绍,本文基于手机产商 锂离子电池使用条件-电池性能和应用介绍 | 华为官网 (huawei.com)提供的介绍文档再次深入学习锂离子电池的一些特…

bug+测试用例

bug的概念: 1.当且仅当规格说明是存在的并且正确,程序与规格说明之间的不匹配才是错误。 2.当需求规格说明书没有提到的功能,判断标准以最终用户为准;当程序没有实现其最终用户合理预期的功能要求时,就是软件错误 bug…

区块链浏览器开发指南分享

01 概括 区块链浏览器是联盟链上的一种数据可视化工具,用户可以通过web页面,直接在浏览器上查看联盟链的节点、区块、交易信息和子链信息、标识使用信息等,用以验证交易等区块链常用操作。 02功能模块 区块链网络概览 区块链网络概览显示…

【Linux】进程IO|系统调用|open|write|文件描述符fd|封装|理解一切皆文件

目录 ​编辑 前言 系统调用 open 参数flags 参数mode write 追加方式 read close 文件描述符 打开多个文件并观察其文件描述符 C语言文件操作 理解一切皆文件 理解open操作 前言 各类语言的文件操作其实是对系统调用的封装 我们经常说,创建一个文件&a…

【数据结构】顺序表(杨辉三角、简单的洗牌算法)

🎇🎉🎉🎉点进来你就是我的人了 博主主页:🙈🙈🙈戳一戳,欢迎大佬指点! 欢迎志同道合的朋友一起加油喔 💪💪💪 谢谢你这么帅…

MySQL可重复读的隔离机制下是否彻底解决了幻读?

答案:没有彻底解决。 一、什么是幻读? 当同一个查询在不同时间产生不同的结果集时,事务中就会出现幻读问题。 幻读关注的是记录数量的不同。 不可重复读关注的是记录内容的不同。 二、快照读和当前读 InnoDB引擎的默认隔离级别是可重复读&…

音视频入门基础:H.264专题(17)——FFmpeg源码获取H.264裸流文件信息(视频压缩编码格式、色彩格式、视频分辨率、帧率)的总流程

音视频入门基础:H.264专题系列文章: 音视频入门基础:H.264专题(1)——H.264官方文档下载 音视频入门基础:H.264专题(2)——使用FFmpeg命令生成H.264裸流文件 音视频入门基础&…

Spark 运行架构

运行架构 Spark 框架的核心是一个计算引擎,整体来说,它采用了标准的 master-slave 结构。上图中的 Driver 表示 master ,负责管理整个集群中的作业任务调度;Executor 则是 slave,负责实际执行任务; 核心组…

深入解析:百数平台图表联动功能设置与实战应用

在当今数据驱动的时代,图表的联动功能已成为数据分析的得力助手。通过深度整合各类图表,如柱形图、折线图、饼图、雷达图、条形图、透视图、面积图、双轴图、地图以及漏斗图等,我们实现了图表之间的无缝衔接,使得数据的呈现与探索…

Spring Boot的Web开发

目录 Spring Boot的Web开发 1.静态资源映射规则 第一种静态资源映射规则 2.enjoy模板引擎 3.springMVC 3.1请求处理 RequestMapping DeleteMapping 删除 PutMapping 修改 GetMapping 查询 PostMapping 新增 3.2参数绑定 一.支持数据类型: 3.3常用注解 一.Request…

【Ant Design Pro】快速上手

初始化 初始化脚手架:快速开始 官方默认使用 umi4,这里文档还没有及时更新(不能像文档一样选择 umi 的版本),之后我选择 simple。 然后安装依赖。 在 package.json 中: "start": "cross-e…