美文网首页
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 如何修改单页面标题

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

  • (22)打鸡儿教你Vue.js

    vue.js 单页面,多页面 Vue cli工具复杂单页面应用Vue cli工具 交互设计,逻辑设计,接口设计 代...

  • 小程序之修改页面标题

    一,参考链接 微信小程序开发(一) 动态修改页面标题修改小程序标题动态设置当前页面标题 二,手动修改小程序的标题(...

  • vue-router

    Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得...

  • 2020-02-07 Vue Route学习(1)

    Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得...

  • vue-router 基础介绍

    Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得...

  • Vue.js 路由学习!

    Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得...

  • Vue Router

    Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得...

  • VueRouter总结

    简介 Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应...

  • Vue Router (起步)

    Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得...

网友评论

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

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