vue-cli+webpack项目动态设置页面title方法

• 安装依赖

npm install vue-wechat-title -save

• 在main.js中引入

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

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

      {
            path: '/',
            name: 'userReg',
            component: userReg,
            meta: {
                title: '商家入驻'
            }
        },
        {
            path: '/success',
            name: 'success',
            component: success,
            meta: {
                title: '注册成功'
            }
        }

image.png

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

<div class="user_two" v-wechat-title="$route.meta.title">
    ...
</div>
//js动态设置,即可在跳转页面时根据条件改变title了
if(this.checked){
    this.$route.meta.title = 'title改变了'
}

image.png

• npm run dev重启项目即可