当前位置:主页 > vue.js教程 >

浅谈vue2 单页面如何设置网页title

发布:2022-07-06 10:39:55 128


为网友们分享了vue相关的编程文章,网友刘波光根据主题投稿了本篇教程内容,涉及到vue、设置title、vue页面title、vue、设置页面title相关内容,已被601网友关注,相关难点技巧可以阅读下方的电子资料。

前端框架如Vue、React等都是单页面的应用,也就是说整个web站点其实都是一个index页面,所谓的页面跳转都是替换index.html里边的内容,而页面的title是在每个页面初始化的时候才设置一次。对于现在的前端框架,传统的每个页面设置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>

重启试试,可以了

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持码农之家。


相关文章

  • vue+vue-validator 表单验证功能实例

    发布:2020-05-14

    这篇文章主要介绍了vue+vue-validator 表单验证功能的实现代码,非常不错,具有参考借鉴价值,需要的朋友可以参考下


  • Vue2 监听属性改变watch的总结分析

    发布:2020-03-25

    今天小编就为大家分享一篇Vue2 监听属性改变watch的实例代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧


  • 你了解vue3.0响应式数据怎么实现吗

    发布:2022-04-03

    这篇文章主要介绍了你了解vue3.0响应式数据怎么实现吗,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧


  • vue elementUI实现图片上传到本地示例效果

    发布:2020-03-13

    今天小编就为大家分享一篇使用elementUI实现将图片上传到本地的示例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧


  • Vue中添加手机验证码的实例方法

    发布:2019-12-16

    组件是Vue.js最强大的功能之一。组件可以扩展HTML元素,封装可重用的代码。这篇文章主要介绍了VUE 中添加手机验证码组件,需要的朋友可以参考下


  • vue中怎样设置、获取、删除cookie

    发布:2020-01-13

    今天小编就为大家分享一篇vue中设置、获取、删除cookie的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧


  • Vue2.0利用 v-model 实现组件props双向绑定的实例解决方法

    发布:2019-08-09

    本篇文章主要介绍了Vue2 利用 v-model 实现组件props双向绑定的优美解决方案,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。


  • vuex vue简单使用方法

    发布:2020-03-24

    在本篇文章里小编给大家整理了关于vuex vue简单使用知识点总结,有需要的朋友们可以参考下。


网友讨论