Vue Router进阶详解

导航守卫

若依框架登录鉴权详解(动态路由)_若依鉴权-CSDN博客

完整的导航解析流程

  1. 导航被触发

    • 当用户点击页面中的链接、使用编程式导航(如router.pushrouter.replace)或手动输入URL时,导航流程被触发。
  2. 在失活的组件里调用beforeRouteLeave守卫

    • 如果当前有激活的组件(即用户正在查看的组件),则在该组件内调用beforeRouteLeave守卫。这允许组件在离开之前执行一些清理工作或条件检查(如用户是否保存了更改)。
  3. 调用全局beforeEach守卫

    • 在路由实例上注册的全局beforeEach守卫会在导航确认之前被调用。这是一个全局的钩子,可以用于执行一些通用的检查或处理逻辑,如身份验证
  4. 在复用组件里调用beforeRouteUpdate守卫(Vue Router 2.2+):

    • 如果目标路由和当前路由使用相同的组件,并且只是参数发生了变化(如从一个用户页面导航到另一个用户页面,但两者都使用相同的User组件),则会在该组件内调用beforeRouteUpdate守卫。这允许组件在参数变化时更新其内容。
  5. 调用路由配置里的beforeEnter守卫

    • 在路由配置对象中定义的beforeEnter守卫会在导航到该路由之前被调用。这是一个路由独享的钩子,可以用于在该路由上执行一些特定的逻辑。
  6. 解析异步路由组件

    • 如果目标路由是一个异步组件,则此时会解析该异步组件。
  7. 在被激活的组件里调用beforeRouteEnter守卫

    • 在目标路由对应的组件内调用beforeRouteEnter守卫。这允许组件在渲染之前执行一些初始化工作。需要注意的是,此时组件实例尚未被创建,因此无法访问this。但可以通过向next函数传递一个回调函数来访问组件实例
  8. 调用全局beforeResolve守卫(Vue Router 2.5+):

    • 在导航被确认之前,并且在所有组件内守卫和异步路由组件被解析之后,调用全局beforeResolve守卫。这是一个全局的钩子,可以用于在导航确认之前执行一些额外的逻辑。
  9. 导航被确认

    • 此时,所有的守卫和钩子都已经被调用,并且没有守卫中断导航。路由实例现在会确认导航,并准备更新DOM。
  10. 调用全局afterEach钩子

    • 在导航完成后调用全局afterEach钩子。这是一个全局的钩子,不会接受next函数,也不会改变导航本身。它主要用于记录导航的详细信息或执行一些清理工作。
  11. 触发DOM更新

    • Vue Router会根据目标路由渲染相应的组件,并更新DOM以反映新的视图。
  12. 用创建好的实例调用beforeRouteEnter守卫中传给next的回调函数

    • 如果在beforeRouteEnter守卫中向next函数传递了一个回调函数,则此时会调用该回调函数,并将组件实例作为参数传递给它。这允许组件在渲染之后执行一些后续工作。

全局守卫(router.beforeEach与router.afterEach)

全局守卫是作用于整个Vue应用的守卫,它们会在任意路由发生改变时被调用。全局守卫主要包括全局前置守卫(router.beforeEach)和全局后置守卫(router.afterEach)。

  • 全局前置守卫:在路由跳转之前执行,可以通过调用router.beforeEach方法注册。这些守卫会按照注册顺序依次执行,并且每个守卫都有机会中断导航过程。如果守卫函数返回false或调用next(false),则导航会被中断。如果守卫函数不调用next()或调用next('/')next({ ... })进行重定向,则导航也会中断
  • 全局后置守卫:在导航完成后被调用,不接受next函数也不可以中断导航。它们主要用于做一些清理工作或者修改状态
router.beforeEach((to, from, next) => {NProgress.start()if (getToken()) {//获取路由的mata.title属性,并存储在Vuex中to.meta.title && store.dispatch('settings/setTitle', to.meta.title)/* has token*/if (to.path === '/login') {next({ path: '/' })NProgress.done()} else {if (store.getters.roles.length === 0) {isRelogin.show = true// 判断当前用户是否已拉取完user_info信息store.dispatch('GetInfo').then(() => {isRelogin.show = falsestore.dispatch('GenerateRoutes').then(accessRoutes => {// 根据roles权限生成可访问的路由表console.log(accessRoutes);router.addRoutes(accessRoutes) // 动态添加可访问路由表//通过返回新的位置来触发重定向next({ ...to, replace: true }) // hack方法 确保addRoutes已完成})}).catch(err => {store.dispatch('LogOut').then(() => {Message.error(err)next({ path: '/' })})})} else {next()}}} else {// 没有tokenif (whiteList.indexOf(to.path) !== -1) {// 在免登录白名单,直接进入next()} else {next(`/login?redirect=${to.fullPath}`) // 否则全部重定向到登录页NProgress.done()}}
})router.afterEach(() => {NProgress.done()
})

 路由独享守卫(beforeEnter)

是作用于单个路由或一组路由的守卫,可以在路由配置中直接定义。这种守卫允许开发者针对特定的路由实施一些逻辑,例如验证用户是否有权限访问某个页面。路由独享守卫只有一个钩子函数beforeEnter它会在进入路由时触发,不会在参数、查询字符串或哈希值改变时触发

组件内守卫(beforeRouteEnterbeforeRouteUpdatebeforeRouteLeave。)

组件内守卫是作用于路由组件内的守卫,只能在路由组件中使用。这些守卫允许开发者在组件的生命周期钩子中控制路由导航。组件内守卫包括beforeRouteEnterbeforeRouteUpdatebeforeRouteLeave

  • beforeRouteEnter:在组件被创建之前调用,此时组件实例尚未被创建,因此无法访问this。可以通过向next函数传递一个回调函数来访问组件实例
  • beforeRouteUpdate在当前路由改变,但是该组件被复用时调用。例如,对于一个带有动态参数的路径/foo/:id,在/foo/1/foo/2之间导航时,同一个Foo组件实例会被复用,此时会调用beforeRouteUpdate守卫。
  • beforeRouteLeave:在导航离开该组件的对应路由时被调用。它可用于在离开路由前进行一些操作,比如保存用户编辑的内容或询问用户是否确定离开。

 动态路由

  1. 权限管理:在应用中,不同用户可能有不同的访问权限。通过动态路由,我们可以在用户登录后根据其权限动态添加或删除路由,从而控制用户对不同页面的访问。
  2. 模块懒加载:对于大型应用,为了优化性能,我们可以按需加载不同模块的路由。在用户访问某个模块时,再动态添加该模块的路由配置。
  3. 动态生成菜单:在一些后台管理系统中,菜单项和对应的路由可能是动态生成的。我们可以根据后台返回的菜单配置,动态生成对应的路由。
const router = createRouter({history: createWebHistory(),routes: [{ path: '/:articleName', component: Article }],
})
router.addRoute({ path: '/about', component: About })
//页面仍然会显示 Article 组件,我们需要手动调用 router.replace() 来改变当前的位置,并覆盖我们原来的位置
router.addRoute({ path: '/about', component: About })
// 我们也可以使用 this.$route 或 useRoute()
router.replace(router.currentRoute.value.fullPath)

在导航守卫中添加路由

    如果你决定在导航守卫内部添加或删除路由,你不应该调用 router.replace(),而是通过返回新的位置来触发重定向:

 
store.dispatch('GenerateRoutes').then(accessRoutes => {// 根据roles权限生成可访问的路由表console.log(accessRoutes);router.addRoutes(accessRoutes) // 动态添加可访问路由表//通过返回新的位置来触发重定向next({ ...to, replace: true }) // hack方法 确保addRoutes已完成})
--------------------------------------------------------------------------
router.beforeEach(to => {if (!hasNecessaryRoute(to)) {router.addRoute(generateRoute(to))// 触发重定向return to.fullPath}
})

过渡效果 

原生CSS中transation与animation

CSS中的Transition(过渡效果)和Animation(动画)是实现网页动态效果的重要技术,能够提升用户体验,使网页看起来更加生动和吸引人。以下是两者的详细介绍:

一、CSS Transition(过渡效果)
  1. 基本概念

    CSS Transition允许元素从一种样式状态平滑地改变为另一种样式状态,通常用于简单的动态效果,如按钮的悬停状态、元素的显示和隐藏等。

  2. 主要属性

    • transition-property:指定应用过渡效果的CSS属性名称,如width、height、background-color等。也可以使用“all”来指定所有可动画属性。
    • transition-duration:定义过渡效果完成所需的时间,单位可以是秒(s)或毫秒(ms)。
    • transition-timing-function:描述过渡效果的速度曲线,如linear(线性)、ease(慢到快再到慢)、ease-in(慢到快)、ease-out(快到慢)和ease-in-out(慢到快再到慢,但比ease更平缓)。还可以使用cubic-bezier函数来自定义速度曲线。
    • transition-delay:定义过渡效果开始前的延迟时间,单位同样可以是秒(s)或毫秒(ms)。
    • transition:上述四个属性的简写形式,按顺序分别指定transition-property、transition-duration、transition-timing-function和transition-delay。
  3. 使用示例

    .box { 
    width: 100px; 
    height: 100px; 
    background-color: red; 
    transition: width 1s ease-in-out; 
    } .box:hover { 
    width: 200px; 
    }

    当鼠标悬停在具有“.box”类的元素上时,元素的宽度会从100px平滑地过渡到200px,过渡效果持续1秒,采用缓入缓出的时间函数。

  4. 注意事项

    • 过渡效果不会应用于display、visibility等少数CSS属性
    • 过渡效果在元素从不可见变为可见时不会触发,除非是通过改变opacity或其他可以产生类似效果的属性来实现可见性的变化。
    • 如果过渡效果的目标值与起始值相同,过渡效果将不会触发。
    • 过渡效果在元素或其父元素被隐藏(如display: none)时不会运行。
二、CSS Animation(动画)
  1. 基本概念

    CSS Animation比Transition更为强大,它允许创建更复杂的动画效果,可以包含多个步骤和关键帧。

  2. 主要属性

    • animation-name:指定要绑定到选择器的关键帧的名称。
    • animation-duration:定义动画完成一个周期需要多少秒或毫秒。
    • animation-timing-function:指定动画将如何完成一个周期,与Transition中的transition-timing-function类似,也可以使用cubic-bezier函数来自定义速度曲线。
    • animation-delay:定义动画什么时候开始,单位可以是秒(s)或毫秒(ms),也可以是负值以表示跳过部分动画。
    • animation-iteration-count:定义动画应该播放多少次,可以是具体次数或infinite(无限循环)。
    • animation-direction:定义是否循环交替反向播放动画,如normal(正向播放)、reverse(反向播放)、alternate(交替正向和反向播放)等。
    • animation-fill-mode:规定当动画不播放时(如动画完成时、有延迟未开始播放时)要应用到元素的样式,如none、forwards(动画结束时保持最后一帧的样式)等。
    • animation-play-state:指定动画是否正在运行或已暂停。
    • animation:上述属性的简写形式,按顺序分别指定各属性的值。
  3. 使用示例

    .box-max { 
    width: 100px; 
    height: 100px; 
    background-color: aqua; 
    animation-name: box1; 
    animation-duration: 3s; 
    } @keyframes box1 { 
    0% { 
    opacity: 1; 
    } 
    100% { 
    opacity: 0.3; 
    } 
    }

    这个示例创建了一个名为“.box-max”的元素,并应用了一个名为“box1”的动画。动画使元素的透明度从1逐渐变为0.3,持续时间为3秒。

  4. 注意事项

    • 使用Animation时,规需要配合@keyframes则来定义动画的关键帧。
    • 动画的性能可能会受到多个因素的影响,如动画的复杂度、元素的数量等。因此,在使用动画时需要注意性能优化,如避免对大量元素同时应用复杂的动画效果。

Vue中transition

<transition>组件会在其包裹的内容(一个元素或组件)进入和离开DOM时,自动应用过渡效果。这些过渡效果可以通过CSS过渡(transition)或CSS动画(animation)来实现。

常见属性

  1. name:用于指定过渡效果的名称。如果不指定,Vue会使用默认的类名前缀v-。指定后,Vue会使用指定的名称作为类名前缀,如fade-enter-active
  2. mode:用于设置过渡的模式。可以是in-out(先完成当前元素的过渡,然后新元素开始过渡)或out-in(先让当前元素过渡出去,然后新元素开始过渡)。默认是in-out
  3. type:指定过渡效果的类型,可以是transition(CSS过渡)或animation(CSS动画)。Vue 2.9.0+版本支持。如果不指定,Vue会根据元素的样式自动判断。
  4. duration:设置过渡效果的持续时间,单位是毫秒。可以是一个固定的值,也可以是一个对象,分别指定进入和离开的持续时间。Vue 2.9.0+版本支持。

常见钩子

  1. before-enter:进入过渡之前调用。
  2. enter:进入过渡被触发时调用。
  3. after-enter:进入过渡结束后调用。
  4. enter-cancelled:在进入过渡被取消时调用(比如通过切换v-if条件来取消过渡)。
  5. before-leave:离开过渡之前调用。
  6. leave:离开过渡被触发时调用。
  7. after-leave:离开过渡结束后调用。
  8. leave-cancelled:在离开过渡被取消时调用。

为过渡命名
<Transition name="fade">...
</Transition>.fade-enter-active,
.fade-leave-active {transition: opacity 0.5s ease;
}.fade-enter-from,
.fade-leave-to {opacity: 0;
}
与原生CSS的transition一同使用
<Transition name="slide-fade"><p v-if="show">hello</p>
</Transition>/*进入和离开动画可以使用不同持续时间和速度曲线。
*/
.slide-fade-enter-active {transition: all 0.3s ease-out;
}.slide-fade-leave-active {transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}.slide-fade-enter-from,
.slide-fade-leave-to {transform: translateX(20px);opacity: 0;
}
与原生animation一同使用 
<Transition name="bounce"><p v-if="show" style="text-align: center;">Hello here is some bouncy text!</p>
</Transition>.bounce-enter-active {animation: bounce-in 0.5s;
}
.bounce-leave-active {animation: bounce-in 0.5s reverse;
}
@keyframes bounce-in {0% {transform: scale(0);}50% {transform: scale(1.25);}100% {transform: scale(1);}
}
深层级过渡与显式过渡时长
<Transition name="nested"><div v-if="show" class="outer"><div class="inner">Hello</div></div>
</Transition>/* 应用于嵌套元素的规则 */
.nested-enter-active .inner,
.nested-leave-active .inner {transition: all 0.3s ease-in-out;
}.nested-enter-from .inner,
.nested-leave-to .inner {transform: translateX(30px);opacity: 0;
}/* ... 省略了其他必要的 CSS *//*我们甚至可以在深层元素上添加一个过渡延迟,从而创建一个带渐进延迟的动画序列:*//* 延迟嵌套元素的进入以获得交错效果 */
.nested-enter-active .inner {transition-delay: 0.25s;
}

然而,这会带来一个小问题。默认情况下,<Transition> 组件会通过监听过渡根元素上的第一个 transitionend 或者 animationend 事件来尝试自动判断过渡何时结束。而在嵌套的过渡中,期望的行为应该是等待所有内部元素的过渡完成。

在这种情况下,你可以通过向 <Transition> 组件传入 duration prop 来显式指定过渡的持续时间 (以毫秒为单位)。总持续时间应该匹配延迟加上内部元素的过渡持续时间

<Transition :duration="550">...</Transition><Transition :duration="{ enter: 500, leave: 800 }">...</Transition>

keep-alive& transition &router-view

<router-view v-slot="{ Component }"><transition><keep-alive><component :is="Component" /></keep-alive></transition>
</router-view>

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

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

相关文章

Rust 力扣 - 1984. 学生分数的最小差值

文章目录 题目描述题解思路题解代码题目链接 题目描述 题解思路 原数组 nums 排序&#xff0c;遍历nums中下标为[0, nums.len() - k]的学生分数 假设当前遍历的下标为i则&#xff0c;以 i 下标为最小值的学生分数的最小差值为nums[i k - 1] - nums[i] 取最小差值的最小值即…

distrobox install in ubuntu 22.04 / 在 ubuntu 22.04 上安装 distrobox (***) OK

要点&#xff1a; 本测试实验&#xff0c;采用的是 podman distrobox 在沙盒 snap 中&#xff0c;安装 distrobox 需要使用 --devmode 开发模式&#xff1b;可以避开 distrobox 的版本检查&#xff1f; distrobox 官方文档显示&#xff0c; Installation https://distrobox.i…

IA应用加速,让电子供应链更智能高效

在当今数字化浪潮中&#xff0c;电子产品制造行业正经历着前所未有的变革。越来越多的企业开展全球化业务&#xff0c;进行数字化转型&#xff0c;对于网络时延的需求也更高。 客户背景 客户专注于为中小微电子产品制造企业提供产品技术方案开发、电子元器件采购、PCBA生产制造…

git 删除远程不存在本地命令却能看到的分支

要删除远程不存在但本地却能看到的分支&#xff0c;你可以按照以下步骤操作&#xff1a; 删除本地分支&#xff1a; 如果你确定要删除的分支已经没有用处&#xff0c;可以使用以下命令来删除本地分支&#xff1a; git branch -d <branch-name>这里的 <branch-name>…

从模糊搜索到语义搜索的进化之路——探索 Chroma 在大模型中的应用价值

目录 从模糊搜索到语义搜索的进化之路——探索 Chroma 在大模型中的应用价值 一、引言 二、实现语义搜索的数据库 Chroma 1、语义搜索是什么 2、Chroma 语义搜索的原理 三、如何在项目中应用 Chroma 1、Chroma 的实际应用场景 2、安装Chroma&#xff08;python环境&…

iOS灵动岛动画小组件怎么播放动画

这个灵动岛相关的展示位置分几个地方&#xff1a; 紧凑型&#xff0c;最小化&#xff0c;扩展型&#xff0c;还有锁屏位置 我们先来看一下我这边实现的动画效果 demo下载&#xff1a; iOS灵动岛GIF动画 灵动岛样式 灵动岛有三种渲染模式&#xff1a; 第一种是 紧凑型&…

网络信息系统的整个生命周期

网络信息系统规划 此阶段主要是根据企业的业务需求、技术发展趋势以及市场环境等因素&#xff0c;对网络信息系统进行初步的规划和设计。规划的内容可能包括系统的目标、功能、性能、安全性等方面的要求。 规划阶段还需要进行可行性研究&#xff0c;评估项目在技术、经济、社…

力扣排序268题 数字丢失

题目&#xff1a; 丢失的数字 给定一个包含[0,n]中n各数的数组nums&#xff0c;找出[0,n]这个范围 内没有出现在数组中的那个数。 示例1&#xff1a; 输出&#xff1a;n 3,因为有3个数字&#xff0c;所以所有的数字都在范围 [0,3]内。2是丢失的数字&#xff0c;因为它没有出现…

原生鸿蒙应用市场:开发者的新机遇与深度探索

文章目录 自动化检测前移&#xff1a;提升开发效率与质量的新利器数据服务&#xff1a;数据驱动的精细化运营助手测试服务&#xff1a;保障应用质量的关键环节应用加密&#xff1a;保护应用安全与权益的利器从开发到运营的全方位支持写在最后 2024年10月22日&#xff0c;华为在…

【建造&机械】垃圾车检测系统源码&数据集全套:改进yolo11-SPPF-LSKA

改进yolo11-swintransformer等200全套创新点大全&#xff1a;垃圾车检测系统源码&#xff06;数据集全套 1.图片效果展示 项目来源 人工智能促进会 2024.10.30 注意&#xff1a;由于项目一直在更新迭代&#xff0c;上面“1.图片效果展示”和“2.视频效果展示”展示的系统图片…

全差分运放电路分析

可以看到&#xff0c;该运放有正负两个反馈。首先需要申明的是&#xff1a;全差动运算放大器仍然满足虚短虚断的特性。 从上图中可以看到&#xff0c;运放的正输入端有一个Vin信号&#xff0c;负输入端没有接输入信号&#xff1b;这是一种典型的将单端输入型号转化成差分信号的…

Win/Linux/Kylin 系统安装指定版本 jdk(8u171为例)

现在安装一个jdk环境&#xff0c; 应该也不是什么麻烦事&#xff0c;教程满天飞&#xff0c;但如果你需要安装指定版本的jdk&#xff0c;那文章还是有点乱&#xff0c;给的下载地址也不太对&#xff0c;不太好找&#xff0c;有的版本还要花钱买积分.......比较靠谱还是官网&…

Java 正则基础

本文里简单的记录了一下Java正则的内容&#xff0c;因为之前学了python版的&#xff0c;所以零基础的可以去看一下视频&#xff1a;正则专题。而且没有列出正则里的其他方法&#xff0c;需要的可以百度一下 快速入门 class RegExp {public static void main(String[] args) {…

std::bind绑定普通函数、模板、类成员函数、类模板函数测试和简单策略

绑定普通函数 绑定具体值 代码 #include <iostream> #include <vector> #include <cassert> #include <functional> using namespace std;int add_func(int a, int b) {return a b; }int main() {auto func std::bind(add_func, 5, 10);cout <…

CentOS 7 软件/程序安装示例

安装软件/程序 wget&#xff0c;前提需要用 root 用户 1、搜索软件/程序 yum search wget 搜索到软件/程序。 2、安装软件/程序 yum -y install wget 安装完成。

USB协议学习

文章目录 USB发展背景发展变化速度等级通讯接口 四种传输主设备 & 从设备主设备从设备 连接与检测高速设备与主机连接USB总线常见的几种状态 枚举过程特点 控制传输学习资料 USB发展背景 发展变化 USB1.1&#xff1a;规范了USB低全速传输&#xff1b; USB2.0&#xff1a;…

qt QRadioButton详解

QRadioButton 是一个可以切换选中&#xff08;checked&#xff09;或未选中&#xff08;unchecked&#xff09;状态的选项按钮。单选按钮通常呈现给用户一个“多选一”的选择&#xff0c;即在一组单选按钮中&#xff0c;一次只能选中一个按钮。 重要方法 QRadioButton(QWidget…

内核——全局句柄表

实验环境&#xff1a;win7 x32 首先引入一段基础概念&#xff1b; 1.在windows下所有的资源都是用对象的方式进行管理的(文件、进程、设备等都是对象)&#xff0c;当要访问一个对象时&#xff0c;如打开一个文件&#xff0c;系统就会创建一个对象句柄&#xff0c;通过这个句柄…

windows系统类似于linux的nohup命令后台启动jar服务

一、首先新建一个后缀名为.bat文件 二、将jar包放在与jar包同一个路径下 三、编写.bat文件 echo off start javaw -Xms512m -Xmx1024m -XX:PermSize256m -XX:MaxPermSize512m -XX:MaxNewSize512m -jar xxxxx-22900.jar >> StartupLog.log 2>&1 & exit 四…

LiveQing视频点播流媒体RTMP推流服务功能-支持电子放大拉框放大直播视频拉框放大录像视频流拉框放大电子放大

LiveQing视频点播流媒体RTMP推流服务功能-支持电子放大拉框放大直播视频拉框放大录像视频流拉框放大电子放大 1、鉴权直播2、视频点播3、RTMP推流视频直播和点播流媒体服务 1、鉴权直播 云直播服务-》鉴权直播 -》播放 &#xff0c;左键单击可以拉取矩形框&#xff0c;放大选中…