vue动态设置页面title方法

第一种方法

npm install vue-wechat-title --save

• 在mian.js中引入

//设置title

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

• 在router的index.js的路由中加上参数

 {
     path: '/login',
     component: Login,
     meta: {
        title: '登录'
     }
 }

 

• 如果是公共组件，在跳转时根据条件来动态设置title，可以在最外层的div上设置v-wechat-title="$route.meta.title"再动态去改变title即可

<template>
    <div class="hours-con container" v-wechat title="$route.meta.title">
          .....
    </div>
</template>

第二种方法

 

//在main.js中设置title

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