应无所住,而生其心
排名
1
文章
860
粉丝
112
评论
163
net core webapi post传递参数
庸人 : 确实坑哈,我也是下班好了好几次,发现后台传递对象是可以的,但...
百度编辑器自定义模板
庸人 : 我建议换个编辑器,因为现在百度富文本已经停止维护了,用tinymec...
ICP备案 :渝ICP备18016597号-1
网站信息:2018-2025TNBLOG.NET
技术交流:群号656732739
联系我们:contact@tnblog.net
公网安备:50010702506256
欢迎加群交流技术

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

190人阅读 2023/2/16 10:20 总访问:5182847 评论:0 收藏:0 手机
分类: 前端

vue实现全局的页面内容,很简单加到App.vue里边就行

比如每个页面都添加一个悬浮菜单。以及添加例外的页面,在某个页面不显示悬浮的菜单

像正常那样引用组件就行了。chatentry.vue就是封装的悬浮菜单的方法。这样引用之后所有页面都有这个悬浮的菜单效果了。

如果想要某个页面,不出现这个悬浮菜单,其实在app.vue里边使用v-if判断一下,如果是某个页面就不出现

  1. <div v-if="locaUrl.indexOf('/chatmain')==-1">
  2. <Chatentry />
  3. </div>

下面js中去获取一下当前页面的地址,因为是根据这个地址判断的

  1. export default {
  2. name: 'App',
  3. components: {
  4. Chatentry
  5. },
  6. data() {
  7. return {
  8. locaUrl: ''
  9. }
  10. },
  11. mounted() {
  12. // 获取一下当前页面的地址
  13. this.locaUrl = location.href
  14. // console.log(this.$route)
  15. // console.log(this.$route.path)
  16. // console.log(this.$router)
  17. }
  18. }

这样可能会出现需要刷新才出来的情况,因为mounted方法执行时机的问题可以要换成这样写
下面获取的时候只获取location

  1. mounted() {
  2. this.mylocation = location
  3. // alert(location.href)
  4. // this.locaUrl = location.href
  5. }

然后上面去即时获取href

  1. <template>
  2. <div id="app">
  3. <router-view />
  4. <div v-if="mylocation.href.indexOf('/chatmain')==-1&&mylocation.href.indexOf('/login')==-1">
  5. <Suspendmenuentry />
  6. </div>
  7. </div>
  8. </template>

Vue全局变量

也很简单,在mian.js里边定义就行了

或者也是直接使用


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

评价