在 Vue Router 中,可以为路由和路由组件注册全局的路由守卫,也可以在组件内部注册路由守卫。

组件内部的路由守卫有以下几种:

  • beforeRouteEnter:在路由进入组件前被调用,但是在组件实例化之前被调用,因此在该守卫中无法访问组件实例的 this
  • beforeRouteUpdate:在当前路由改变,但是仍然在该组件中时被调用,即在当前组件的 beforeRouteLeave 守卫执行完毕之后,在同一组件中导航时调用。
  • beforeRouteLeave:在路由离开组件时被调用,可以在该守卫中确认是否允许离开该组件。

组件内部的路由守卫的注册方法与全局路由守卫相同,可以通过 Vue Router 实例的 beforeEachbeforeResolveafterEach 方法来注册路由守卫,也可以通过在组件选项中添加 beforeRouteEnterbeforeRouteUpdatebeforeRouteLeave 属性来注册路由守卫。

下面是一个示例代码:

<template>
<div>
<h1>{{ title }}</h1>
<p>{{ message }}</p>
</div>
</template> <script>
import { defineComponent, reactive, ref } from 'vue' export default defineComponent({
setup() {
const title = ref('Component with Route Guard')
const state = reactive({
message: 'This component has route guards.'
}) const beforeRouteEnter = (to, from, next) => {
console.log('beforeRouteEnter')
next(vm => {
console.log('beforeRouteEnter: next callback')
})
} const beforeRouteUpdate = (to, from, next) => {
console.log('beforeRouteUpdate')
console.log(this)
next()
} return {
title,
message: state.message,
beforeRouteEnter,
beforeRouteUpdate
}
}
})
</script>

在上面的示例中,setup() 函数被用于创建响应式数据,并且定义了 beforeRouteEnterbeforeRouteUpdate 两个路由守卫。其中,title 使用了 ref 来创建一个响应式数据,而 state 使用了 reactive 来创建一个响应式对象。同时,beforeRouteEnterbeforeRouteUpdate 被定义为普通函数,并作为 setup() 函数的返回值暴露出来,以供组件外部使用。

vue全家桶进阶之路38:Vue3 组件内部路由守卫的更多相关文章

  1. Vue 全家桶 + Electron 开发的一个跨三端的应用

    代码地址如下:http://www.demodashi.com/demo/11738.html GitHub Repo:vue-objccn Follow: halfrost · GitHub 利用 ...

  2. Vue全家桶高仿小米商城

    大家好,我是河畔一角,时隔半年再次给大家带来一门重量级的实战课程:<Vue全家桶高仿小米商城>,现在很多公司都在参与到商城的构建体系当中,因此掌握一套商城的标准开发体系非常重要:商城的开始 ...

  3. vue证明题一,vue全家桶的构成

    简单说下vue的构成,当然是简单为主,网上这东西满天飞,简单说几句就ok 1.vue是什么 vue读作view,是一种js框架.只关注于视图层,操作内容包括js,html,css 2.vue全家桶是什 ...

  4. 用 Vue 全家桶二次开发 V2EX 社区

    一.开发背景 为了全面的熟悉Vue+Vue-router+Vuex+axios技术栈,结合V2EX的开放API开发了这个简洁版的V2EX. 在线预览 (为了实现跨域,直接npm run dev部署的, ...

  5. Vue全家桶

    简介 “简单却不失优雅,小巧而不乏大匠”. Vue.js 是一个JavaScriptMVVM库,是一套构建用户界面的渐进式框架.它是以数据驱动和组件化的思想构建的,采用自底向上增量开发的设计. 为什么 ...

  6. 从零开始系列之vue全家桶(3)安装使用vuex

    什么是vuex? vuex:Vue提供的状态管理工具,用于同一管理我们项目中各种数据的交互和重用,存储我们需要用到数据对象. 即data中属性同时有一个或几个组件同时使用,就是data中共用的属性. ...

  7. 使用vue全家桶制作博客网站

    前面的话 笔者在做一个完整的博客上线项目,包括前台.后台.后端接口和服务器配置.本文将详细介绍使用vue全家桶制作的博客网站 概述 该项目是基于vue全家桶(vue.vue-router.vuex.v ...

  8. 转载: 使用vue全家桶制作博客网站 HTML5 移动网站制作的好教程

    使用vue全家桶制作博客网站   前面的话 笔者在做一个完整的博客上线项目,包括前台.后台.后端接口和服务器配置.本文将详细介绍使用vue全家桶制作的博客网站 概述 该项目是基于vue全家桶(vue. ...

  9. Vue全家桶介绍

    一直不清楚全家桶是什么玩意,上网搜了一下,才知道就是平时项目中使用的几个依赖包,下面分享一下 Vue 全家桶介绍 Vue有著名的全家桶系列,包含了vue-router(http://router.vu ...

  10. 一个简单的假vue全家桶(vue+vue-router+require)

    首先说明我觉得这是一个比较好理解的vue全家桶(虽然是假的),模块化也是用require来做的,而且如果后期有必要压缩我也会用gulp来做 1.依赖个个本地模块,require只是用来载入page,这 ...

随机推荐

  1. 第二章启动引导器GRUB2

    第二章启动引导器GRUB2grub的配置文件路径:vim /boot/grub2/grub.cfg (不建议直接编辑)vim /etc/default/grub (可编辑的文件)将编辑的操作刷新到/b ...

  2. Less8-Less10 时间注入

    Less-8和Less-5使用的是一样的布尔盲注,为了学习,这里我们使用时间盲注 Less-8 这里使用到了mysql中的if语句,格式为if(条件,正确执行,错误执行) 实例如图: sleep(秒速 ...

  3. Java程序死锁问题定位与解决

    更多内容,前往 IT-BLOG 一.概述 死锁是指两个或两个以上的进程在执行过程中,因争抢资源而造成的一种互相等待的现象,若无外力干涉它们将无法推进,如果系统资源充足,进程的资源请求能够得到满足,死锁 ...

  4. MyBatis 重点知识归纳

    一.MyBatis 简介 [1]MyBatis 是支持定制化 SQL,存储过程以及高级映射的优秀持久化框架.[2]MyBatis 避免了几乎所有的 JDBC 代码和手动设置参数以及获取查询结果集.[3 ...

  5. 在Vue中发起axios请求成功,却被catch捕捉返回Network Error

    前端发起请求成功,后台接收处理返回,却被axios的catch捕获,没有走then函数. 最后添加了headers配置成功解决,如上,附上axios接口配置中文文档:axios中文文档|axios中文 ...

  6. Cannot read properties of undefined (reading 'toUpperCase')

    无法读取 JS 中未定义的属性"toUpperCase"|鲍比哈兹 (bobbyhadz.com) 根据其中的内容找到了答案:使用了未定义的属性去使用toUpperCase()函数 ...

  7. ACM-DP-数塔问题

    Description 在讲述DP算法的时候,一个经典的例子就是数塔问题,它是这样描述的: 有如下所示的数塔,要求从顶层走到底层,若每一步只能走到相邻的结点,则经过的结点的数字之和最大是多少? 已经告 ...

  8. tcp,udp tcp三次握手四次挥手,基于套接字进行简单通信

    1.应用层: 应用层功能:规定应用程序的数据格式. 例:TCP协议可以为各种各样的程序传递数据,比如Email.WWW.FTP等等.那么,必须有不同协议规定电子邮件.网页.FTP数据的格式,这些应用程 ...

  9. C盘爆满的解决方法,不用删除文件,使用分区助手无损增加内存

    一.分区助手傲梅科技 对于我们C盘内存不足的来说,老师推荐的yyds. 我的内存C盘历史最低是900多M,1.5G还是多的,经过我不断的删除文件,发现没什么用,电脑用久了C盘文件占内存自然就多了!!改 ...

  10. Redis性能瓶颈揭秘:如何优化大key问题?

    1. 什么是Redis大key问题 Redis大key问题指的是某个key对应的value值所占的内存空间比较大,导致Redis的性能下降.内存不足.数据不均衡以及主从同步延迟等问题. 到底多大的数据 ...