• 技术文章 >web前端 >js教程

    简单了解vue2 单页面如何设置网页title

    小云云小云云2017-12-23 10:17:21原创1184
    前端框架如Vue、React等都是单页面的应用,也就是说整个web站点其实都是一个index页面,所谓的页面跳转都是替换index.html里边的内容,而页面的title是在每个页面初始化的时候才设置一次。对于现在的前端框架,传统的每个页面设置title标签的做法是不行的。本文主要介绍了vue2 单页面如何设置网页title,小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助到大家。

    推荐使用vue-wechat-title插件

    下载安装插件依赖


    npm install vue-wechat-title --save

    在main.js中引入插件


    import VueWechatTitle from 'vue-wechat-title'
    Vue.use(VueWechatTitle)

    在路由文件 index.js中给每个路由添加title


     routes: [{
      path: '/',
      name: 'index',
      component: index,
      meta:{
        title:'首页' // 标题设置在这里
      }
     },{
      path:'/detail',
      name:'detail',
      component:detail,
      meta:{
        title:'详情页' // 标题设置在这里
      }
     }]

    在app.vue中修改router-view组件


    <router-view v-wechat-title='$route.meta.title'></router-view>

    重启试试,可以了

    相关推荐:

    详解失去焦点时网页Title改变的实现方法

    在html<title></title>标签添加图标,网页title左边显示网页的logo图标

    JS实现超简洁网页title标题跑动闪烁提示效果代码_javascript技巧

    以上就是简单了解vue2 单页面如何设置网页title的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:vue2 如何 页面
    上一篇:jquery简单实现隔行变色方法 下一篇:实例详解jQuery实现的简单无刷新评论功能
    Web大前端开发直播班

    相关文章推荐

    • Angular项目如何上线?结合nginx来聊聊上线流程!• 什么是流(Stream)?如何理解Nodejs中的流• 一文聊聊Angular中的生命周期• 什么是管道?浅析Angular中的管道(PIPE)• 值得了解的几个实用JavaScript优化小技巧

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网