Nuxt处理全局组件的显示与隐藏

简介: 在Nuxt开发过程中,大家会遇到需要控制全局组件的显示与隐藏。比如说移动端的路由导航栏、头部的返回操作。。。为了使切换页面的同时,确定是否展示全局组件,保证页面展示的平稳过渡。下面是我在项目中用到一个办法,已实现。

在Nuxt开发过程中,大家会遇到需要控制全局组件的显示与隐藏。比如说移动端的路由导航栏、头部的返回操作。。。

为了使切换页面的同时,确定是否展示全局组件,保证页面展示的平稳过渡。

下面是我在项目中用到一个办法,已实现。

1、在 middleware 中处理,middleware可以配置到 全局 也可以直接配置到 page组件中。

下图是直接配置在全局:

image.png

2、使用 middleware 的同时,结合vuex来使用。

在vuex中做全局状态判断,然后使用computed配合使用。

image.png

目录
打赏
0
0
0
0
127
分享
相关文章
Vue封装全局注册弹窗组件,实现全局调用。
前言 很多网站都会有权限控制,比如一些博客网站的评论系统,必须要用户登录后才能发起评论,如果未登录想要评论,网站则会弹出登录弹窗。这个登录弹窗可以任何需要权限的地方弹出,所以这个弹窗组件我们就必须封装为共有的,共全局调用。
1605 0
在组件中使用全局样式
【10月更文挑战第5天】
182 60
|
8月前
|
基于Vue2或Vue3实现任意上下左右拖拽悬浮的元素,且配置为自定义的全局指令
这篇文章介绍了如何在Vue 2或Vue 3项目中实现一个自定义的全局指令`v-dragSwitch`,用于创建可以任意方向拖拽并悬浮的元素,同时包含边界处理的逻辑。
2163 2
基于Vue2或Vue3实现任意上下左右拖拽悬浮的元素,且配置为自定义的全局指令
|
8月前
|
前端ElementPlus框架中的几种图标按钮使用方式
本文介绍了如何在Element Plus前端框架中使用带有图标的按钮,包括设置按钮大小、图标大小、按钮类型以及如何为图标添加点击事件。
663 0
|
9月前
uniapp实战 —— 轮播图【自定义指示点】(含组件封装,自动注册全局组件,添加全局组件类型声明)
uniapp实战 —— 轮播图【自定义指示点】(含组件封装,自动注册全局组件,添加全局组件类型声明)
467 1
|
9月前
|
Vite项目当中的SVG图标的配置及图标全局组件的封装
Vite项目当中的SVG图标的配置及图标全局组件的封装
243 0
【亮剑】在React中如何通过点击事件控制组件显示与隐藏,包括基础概念和高级应用
【4月更文挑战第30天】本文介绍了在React中如何通过点击事件控制组件显示与隐藏,包括基础概念和高级应用。使用`useState`钩子和Context API可实现状态驱动的条件渲染,通过CSS类控制组件样式,或利用React Portals在DOM不同位置渲染。性能优化应注意避免不必要的渲染、合理使用Keys、优化事件处理器、使用Memoization及清理资源。测试和验证确保逻辑正确性,以构建动态用户界面并提升应用性能。
747 0