美文网首页
vue.js 如何修改单页面标题

vue.js 如何修改单页面标题

作者: _littleTank_ | 来源:发表于2017-08-29 15:41 被阅读0次

    其实方法很多,百度一下可以搜出来一大把。下边的方法就是最直接的方法,但是看网上说可能有其他问题,我没试过,感兴趣的可以试试。

    created:function(){
         document.title = '测试页面';
    }
    

    我们可以用在指令,新建一个title.js如下:

    import Vue from 'vue';
    Vue.directive('title', {
      inserted: function (el, binding) {
        document.title = el.dataset.title
      }
    })
    

    把上边的title.js导入到main.js里,这样就可以一劳永逸(因为main.js是在所有页面引用)。
    然后在需要修改标题的页面里运用如下:

    <template>
      <div class="myAccount" v-title data-title="测试页面" >
           这个是测试页面
      </div>
    </template>
    //主要是 :v-title data-title="测试页面"
    

    这样页面的标题就修改成了 “测试页面”

    相关文章

      网友评论

          本文标题:vue.js 如何修改单页面标题

          本文链接:https://www.haomeiwen.com/subject/jygodxtx.html