Vue Spa切换页面时更改标题的实例代码

 更新时间:2017年07月15日 16:39:17   作者:薛伟杰   我要评论
本篇文章主要介绍了Vue Spa切换页面时更改标题的实例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

在Vue组件化开发过程中,因为是单页面开发,但是有时候需要页面的title根据情况改变,于是上网查了一下,各种说法花(wo)里(kan)胡(bu)哨(dong), 于是想到一个黑科技 documet.title="xxx";

随便创建一个项目,在独立的模块中,created在钩子函数启动之后document.title='标题'; 但是据说在IOS的微信下是无效的,虽然用苹果机测试过有用,但是想到这样会影响我的代码洁癖。

<script>
export default {
  data(){
    return{
    }
  },
  created(){
    document.title="首页"
  },
}
</script>

于是在github上找到一个好用的东西 vue-wechat-title

通过 npm install vue-wechat-title  安装

引入需要的vue-router与页面需要的组件之后

const router = new VueRouter({
  mode: 'history',
  routes:[
    {
    name: 'index',
    path: '/',
    meta: {
        title: '首页'
     },
     component: index
    },
   {
     name: 'root',
     path: '/root', 
     meta: {
        title: '肉特'
    },
    component: root
    }  
 ]
});
Vue.use(require('vue-wechat-title')); //实例化参数

在组件中顶部添加一段 <div v-wechat-title="$route.meta.title"></div>

即可实现改变title效果。

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

相关文章

  • 通过vue手动封装on、emit、off的代码详解

    通过vue手动封装on、emit、off的代码详解

    这篇文章主要介绍了通过vue手动封装on,emit,off的代码详解,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-05-05
  • 浅谈Vue2.0中v-for迭代语法的变化(key、index)

    浅谈Vue2.0中v-for迭代语法的变化(key、index)

    下面小编就为大家分享一篇浅谈Vue2.0中v-for迭代语法的变化(key、index),具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • 浅谈Vue.js 1.x 和 2.x 实例的生命周期

    浅谈Vue.js 1.x 和 2.x 实例的生命周期

    下面小编就为大家带来一篇浅谈Vue.js 1.x 和 2.x 实例的生命周期。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • vue将单页面改造成多页面应用的方法

    vue将单页面改造成多页面应用的方法

    最近领导交我一个项目是使用 vue-cli 搭建的单页面应用。下面小编通过本文给大家介绍vue将单页面改造成多页面应用的方法 ,感兴趣的朋友一起看看吧
    2018-11-11
  • Vue 进入/离开动画效果

    Vue 进入/离开动画效果

    这篇文章主要介绍了Vue 进入/离开动画效果,代码简单易懂,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-12-12
  • 微信内置开发 iOS修改键盘换行为搜索的解决方案

    微信内置开发 iOS修改键盘换行为搜索的解决方案

    今天小编就为大家分享一篇微信内置开发 iOS修改键盘换行为搜索的解决方案,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • vue注册组件的几种方式总结

    vue注册组件的几种方式总结

    下面小编就为大家分享一篇vue注册组件的几种方式总结,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • vue实现微信浏览器左上角返回按钮拦截功能

    vue实现微信浏览器左上角返回按钮拦截功能

    这篇文章主要介绍了vue实现微信浏览器左上角返回按钮拦截功能,本文通过实例代码相结合的形式给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-01-01
  • Vue.js常用指令的使用小结

    Vue.js常用指令的使用小结

    这篇文章主要介绍了Vue.js常用指令的使用,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-06-06
  • Vue中错误图片的处理的实现代码

    Vue中错误图片的处理的实现代码

    这篇文章主要介绍了Vue中错误图片的处理的实现代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-11-11

最新评论