vue路由跳转页面title随之变化

一、通过路由钩子

1.每个路由添加一个meta

[
  {
     path:'/index',
     component:'Index',
     meta: {
        title: '首页'
     },
   }
]

2.main.js文件加入钩子函数

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>',
  methods: {
    Ajax,
  }
})

//钩子函数
router.beforeEach((to,from,next) => {
  /* 路由发生变化修改页面title */
  if(to.meta.title){
    document.title = to.meta.title;
  }
  next();
})

二、 Vue.js单页应用在iOS系统下部分APP的webview中,标题不能通过document.title = xxx 的方式修改,该插件只为解决该问题而生(兼容安卓)

https://www.npmjs.com/package/vue-wechat-title

1.安装

Vue.js 1.x
npm install vue-wechat-title@1.0.7 --save

Vue.js 2.x
npm install vue-wechat-title --save

2.引入

在main.js文件中引入
ES6:Vue.use(require('vue-wechat-title'))
或
import WechatTitle from 'vue-wechat-title'
Vue.use(WechatTitle)

3.用法

router中每个路由添加meta
[
  {
     path:'/index',
     component:'Index',
     meta: {
        title: '首页'
     },
   }
]

<!-- 任意元素中加 v-wechat-title 指令 建议将标题放在 route 对应meta对象的定义中 -->
<div v-wechat-title="$route.meta.title"></div>
<!--or-->
<router-view v-wechat-title="$route.meta.title"></router-view>

自定义加载的图片地址 默认是 ./favicon.ico 可以是相对或者绝对的
<div v-wechat-title="$route.meta.title" img-set="/static/logo.png"></div>