vue实现全局内容，全局页面，比如每个页面都添加一个悬浮菜单。以及添加例外的页面，在某个页面不显示悬浮的菜单。vue全局变量

847人阅读 2023/2/16 10:20 总访问：5852017 评论：0 收藏：0 手机

分类: 前端

### vue实现全局的页面内容，很简单加到App.vue里边就行

比如每个页面都添加一个悬浮菜单。以及添加例外的页面，在某个页面不显示悬浮的菜单

![](https://img.tnblog.net/arcimg/aojiancc2/a79e9e82307f4bc08605513e94625f28.png)

像正常那样引用组件就行了。chatentry.vue就是封装的悬浮菜单的方法。这样引用之后所有页面都有这个悬浮的菜单效果了。

![](https://img.tnblog.net/arcimg/aojiancc2/02ca4029ecce4afa88eebdfbbb4011c7.png)

**如果想要某个页面，不出现这个悬浮菜单，其实在app.vue里边使用v-if判断一下，如果是某个页面就不出现**

```
<div v-if="locaUrl.indexOf('/chatmain')==-1">
  <Chatentry />
</div>
```
下面js中去获取一下当前页面的地址,因为是根据这个地址判断的
```
export default {
  name: 'App',
  components: {
    Chatentry
  },
  data() {
    return {
       locaUrl: ''
    }
  },
  mounted() {
    // 获取一下当前页面的地址
    this.locaUrl = location.href
    // console.log(this.$route)
    // console.log(this.$route.path)
    // console.log(this.$router)
  }
}
```
**这样可能会出现需要刷新才出来的情况，因为mounted方法执行时机的问题可以要换成这样写**
下面获取的时候只获取location
```
mounted() {
  this.mylocation = location
  // alert(location.href)
  // this.locaUrl = location.href
}
```
然后上面去即时获取href
```
<template>
  <div id="app">
    <router-view />
    <div v-if="mylocation.href.indexOf('/chatmain')==-1&&mylocation.href.indexOf('/login')==-1">
      <Suspendmenuentry />
    </div>
  </div>
</template>
```



### Vue全局变量

也很简单，在mian.js里边定义就行了

![](https://img.tnblog.net/arcimg/aojiancc2/c7a9fa7607964640a29735d759b62b04.png)

或者也是直接使用
![](https://img.tnblog.net/arcimg/aojiancc2/90e6fffbcce64e62846ae9508c50b7e9.png)

欢迎加群讨论技术，1群：677373950(满了，可以加，但通过不了)，2群：656732739。有需要软件开发，或者学习软件技术的朋友可以和我联系~(Q:815170684)

👈{{preArticle.title}}

👉{{nextArticle.title}}

评价

vue实现全局内容，全局页面，比如每个页面都添加一个悬浮菜单。以及添加例外的页面，在某个页面不显示悬浮的菜单。vue全局变量

{{titleitem}} {{titleitem}}

{{titleitem}} {{titleitem}}