我有一个名为NoTrimiStudio.VUE的组件,它被导入并在同样的父组件中使用,我的路由器视图也在使用。
非常基本的示例-my app.vue类似于:

<Template>
<Notifications></Notifications>
<router-view></router-view>
</Template>

大多数可以通过路由器访问的单独页面都有一个组件,该组件设置页面标题如下:
metaInfo: function () {
            return {
                title: 'Leads - ' + this.view
            }
        }

我想对notifications.vue做的是每当有新的通知出现时,获取浏览器选项卡的当前标题,并在其前面添加(1)(或任何数字)。我尝试使用regular document.title获取当前标题,但始终返回未定义的标题。我还有什么办法可以这样做?

最佳答案

我假设您的通知组件中有一个数据对象。
notification.vue的简化版本

new Vue({
  data: {
    notifications: []
  },
  watch: {
    notifications (current, previous) {
      document.title = '(' + current.length + ')' + document.title.replace(/ *\([^)]*\) */g, "");
    }
  }
})

我们在这里做的是监视notifications对象的更改。如果它改变了,我们在文件标题前加上通知的数目。
document.title.replace(/ *\([^)]*\) */g, "")此部分将删除当前通知计数,然后再使用新计数进行更新。
这种方法的局限性:
如果标题中的括号中有其他(单词),它们将被删除。
如果通知计数为零,则显示(0)标题如果计数为1234,则显示(1234)标题。您可能需要将更多的检查放在适当的位置以不显示零,如果长度大于9,则可以执行9+。

关于vue.js - 获取页面的当前标题并从嵌套组件进行更新并在Vuejs 2中进行更新,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/54222089/

10-11 12:52
查看更多