vue某个界面不引用公共组件

最新推荐文章于 2022-11-17 22:48:16 发布

啾啾尤尤

最新推荐文章于 2022-11-17 22:48:16 发布

阅读量2k

点赞数 3

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_43699616/article/details/104910470

版权

在Vue项目中，通常App.vue包含公共组件如导航栏。然而，对于某些特定页面，例如登录页，可能不需要这些公共组件。通过使用v-show进行条件渲染，可以避免在登录页显示导航栏。此外，确保在index.js路由配置中正确设置以实现页面跳转。

摘要由CSDN通过智能技术生成

一般App.vue文件中存放的是项目中经常会用到的公共组件，比如导航栏等，但如果我的某个页面，比如登录页面不需要导航栏，需要用v-show来判断

App.vue中：

在这里插入图片描述 App.vue整体代码：

<template>
  <div id="app">
     <Menu
     v-show="!(path === '/components/system/System')" ></Menu>

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

啾啾尤尤

关注关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

vue导航栏/公共组件在部分页面显示,在其它页面不显示

weixin_43983711的博客

03-13

2584

需求：结合拖拽的返回首页按钮，让在首页/登陆页不展示出来，其他页面都展示的需求进行开发 1 .router-view结合$route.meta 在app.vue <template> <div id="app"> <div v-if="$route.meta.keepAlive"> <router-view v-wechat-tit...

解决vue项目中某一页面不想引用公共组件app.vue的问题

10-14

主要介绍了解决vue项目中某一页面不想引用公共组件app.vue的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

参与评论您还未登录，请先登录后发表或查看评论

vue项目中某一页面不想引用公共组件app.vue解决办法

热门推荐

彳亍的博客

04-15

1万+

Vue 单页面应用把公共组件放在 app.vue 但是我希望某个页面没有这些公共组件怎么办(比如登陆页面)每个页面都有导航栏但是我希望登陆页面只有一个背景色和一个登陆框没有导航栏那应该怎样设置呢? vue中文文档：https://router.vuejs.org/zh/guide/essentials/dynamic-matching.html#%E5%93%8D%E5%BA%94%...

vue.config.js中配置全局less样式，不需要在每一个vue组件中都引入该公共样式

qq_40685439的博客

02-19

4498

在做vue项目的时候，有时候需要用到一些公共的less样式，这时候全局配置好过局部配置，在全局配置的时候，试过直接在main.js引入less的公共文件；也试过在vue.config.js文件中配置css属性：但是上面这两种方式都报错，直到尝试了以下方法： const path = require(‘path’) module.exports = { chainWebpack: config => { const types = [‘vue-modules’, ‘vue’, ‘normal-

vue中全局引入的组件如何在特定页面不引入？

weixin_42865522的博客

12-29

5237

vue中全局引入的组件如何在特定页面不引入？在项目中会引入一些全局组件如header.vue、footer.vue等，但在一些页面中并不需要引入，如登录、登出页。做法：在APP.vue文件中 <div v-if="headerShow"> <header-nav></header-nav> </div> import header fr...

vue 单页面内不想引用app.vue中的公共组件的解决方法

m0_55315930的博客

09-15

1115

解决Ant-Design-vue(antdv)单独设置某个组件的样式,不污染全局(less预处理器)

qq_42292211的博客

09-17

2053

以表格(table)为例,我想只更改某个界面的表格头部颜色或者表格行间隙,行颜色等一.加外层容器首先找到此组件最近的一个外层容器,下面是一个最简单的示例 <div class='main-container'> <a-table/> </div> 此时table的外层容器为main-container,要想设置table内部的样式,只需要如下 .main-container{ //表格头部颜色 /deep/...

vue中实现传数据不跳转页面_收下这波 vue 技巧，让开发效率翻倍

weixin_39921023的博客

11-21

1991

组件(component)的使用vue 提供的模块化无疑是提高开发效率的神器，而且对于后期代码优化和维护也提供的极大地便利。组件使用简介vue 提供了组件功能，组件又可以分为全局组件和非全局组件。区别是全局组件你可以直接在 .vue 文件中直接使用自定义的 html 即可。非全局组件必须在 Vue 的对象中定义 components 引入这个组件局部组件引用方式import A from '@/c...

Vue详细说明

小白的记录

03-14

2625

一、Vue简介 1.1 简介 Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式的js框架，发布于 2014 年 2 月。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库（如：vue-router，vue-resource，vuex）或既有项目整合。 1.2 MVVM 模式的实现者——双向数据绑定模式 Model：模型层，在这里表示 JavaScript 对象 Vi...

vue 公用页面引用_解决vue项目中某一网页不想引用公共组件app.vue的问题

weixin_29817925的博客

02-22

1124

Vue 单网页应用把公共组件放在 app.vue 但是我希望某个网页没有这些公共组件如何办(比如登录网页)每个网页都有导航栏但是我希望登录网页只有一个背景色和一个登录框没有导航栏那应该怎样设置呢?vue中文文档：点击进入在根组件中：在导航栏使用v-show判断当前路由是否是不需要的组件来完成网页：import HomeHeader from './components/header/H...

在Vue中公共组件仅在某些页面显示

qq_53298230的博客

10-09

484

解决公共组件仅仅在某些页面显示方法之一就是运用 v-if="$route.meta.keepAlive" 例如底部公共组件写在app.js中` <div v-if="$route.meta.keepAlive"> <div class="footer"> <h4>版权信息 Copyright © 2021 - 10 - 9 <br> Someone. All rights reserved. <br&

vue2在部分页面显示公共头部,部分页面不显示公共头部写法及原理

范天缘的博客

05-27

1205

第一步在App.vue里面加入公共头部定义一个v-if=“$route.meta.alive” <template> <div id="app"> <Header v-if="$route.meta.alive"/> <router-view /> </div> </template> <script> import Header from '@/components2/layout/heade

如何直接在父组件中使用某个复用组件，而不用引入和注册？

qq_38969618的博客

12-17

450

在项目的components目录下-》新建xxx组件的目录-》在该目录下再新建xxx.vue页面即可。（即复用组件都用单独的文件夹再套一层，命名规范符合：components/组件名称xx/组件名称xx.vue目录结构即可）。 <!-- 父组件页面：可直接使用，而不用import引入组件&components注册> <bottom-btn text="提交" @click="submitApply"></bottom-btn> ... ...

vue2.0 不引用第三方包的情况下实现嵌套对象的拖拽排序功能

09-06

111

先上一张效果图，然后再上代码（由于只做效果，未做数据相关的处理：实际处理数据时不修改 dom 元素，只是利用 dom 元素传递数据，然后需改数据，靠数据驱动效果） <div :id="index+'_morning'" style="min-height: 20px;" @drop='drop($event)' @dragover='allowDrop($even...

Vue实战技巧——路由中在指定页面隐藏某个组件

qq_39123467的博客

11-17

1215

Vue实战技巧——路由中在指定页面隐藏某个组件

vue使用公共组件的方法_角度—为什么我们应该避免使用公共方法来设计组件

weixin_26750481的博客

09-10

389

vue使用公共组件的方法There are many ways to communicate between components. One of the most frequently used approaches is via public method calls. Many developers with a strong classic web development backgrou...

vue注册全局组件，避免每个页面都引入一遍，以数字动画组件为例

qq_44712405的博客

10-12

737

当我们写了一个通用组件，用的页面较多时，可以注册为全局组件，直接调用，不必每个页面都import一遍。文件结构如下： countTo.vue是一个写好的数字动画的组件 <template> <div class="countToComponents"> <count v-if="resetCount" :startVal='startVal' :endVal='endVal' :duration='2000'> </count>

vue中页面不需要引用app.vue里公共头部组件

weixin_44145526的博客

08-18

3231

vue中页面不需要引用app.vue里公共头部组件如果有一个页面不需要引入公共头部组件，比如登录页，只需要一个登录框和logo组成的页面。如图，不需要引入公共logo,就要用v-show来判断，是否显示。 data中定义path，在mounted中设置this.path=当前页面路由，再监测路由变化。 ...

vue3父组件引用子组件