Vue项目中分别设置每个单页面的标题titile

方法一：使用插件vue-wechat-title

1：npm install vue-wechat-title --save-dev

2:main.js: import VueWechatTitle from 'vue-wechat-title'  Vue.use(VueWechatTitle)

3:在app.vue中修改<router-view>标签: <router-view v-wechat-title='$route.meta.title'></router-view>

方法二：直接编程实现：不用插件

main.js

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

router.js添加meta

const routes = [
     {
          path: '/',
          redirect: 'tab1'
        },
    {
        path:"/tab1",
        component: comform,
        meta:{
                title:'线材首页'
        }
    },
    {
        path: "/tab2",
        component: comform2,
         meta:{
                title:'线材boom查询表'
        }
    },
    {
        path: "/tab3",
        component: comform3,
        meta:{
                title:'测试页面'
        }
    },
    {
        path: "/boomInp",
        component: boomInp,
        meta:{
                title:'剥皮镀锡填写单'
        }
    },
    
]