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

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

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

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

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

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

下图是直接配置在全局:

image.png

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

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

image.png

目录
打赏
0
0
0
0
127
分享
相关文章
|
9月前
|
Vite项目当中的SVG图标的配置及图标全局组件的封装
Vite项目当中的SVG图标的配置及图标全局组件的封装
257 0
Vue3组件,注册全局组件和局部组件
Vue3组件,注册全局组件和局部组件
vue3、react组件数据传值对比分析——父组件传递子组件,子组件传递父组件(一)
vue3、react组件数据传值对比分析——父组件传递子组件,子组件传递父组件
166 0
vue3、react组件数据传值对比分析——父组件传递子组件,子组件传递父组件(二)
vue3、react组件数据传值对比分析——父组件传递子组件,子组件传递父组件
115 0
vue 子组件修改父组件变量问题
vue 子组件修改父组件变量问题
169 0