如何給Vue项目中设置每个单页面的标题

如何給Vue项目中设置每个单页面的标题

第一种方法：直接在main.js之中加入路由导航守卫

第一步： 首先在路由文件index.js中给每个单页面路由添加title

routes: [{
    path: '/',
    name: 'index1',
    component: index1,
    meta:{
        title:'我是第一个标题'
    },
    {
    path: '/index2',
    name: 'index2',
    component: index2,
    meta:{
        title:'我是第二个标题'
    },
    ]

第二步：使用路由导航守卫

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

第二种方法：使用vue-wechat-title插件

第一步： 首先在路由文件index.js中给每个单页面路由添加title

routes: [{
    path: '/',
    name: 'index1',
    component: index1,
    meta:{
        title:'我是第一个标题'
    },
    {
    path: '/index2',
    name: 'index2',
    component: index2,
    meta:{
        title:'我是第二个标题'
    },
    ]

第二步：下载安装依赖

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

第三步： 在main.js文件之中，导入并引用

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

第四步：在app.vue中修改

<router-view v-wechat-title='$route.meta.title' v-if='$route.meta.title'></router-view>
<router-view v-wechat-title='$route.meta.title' v-if='!$route.meta.title'></router-view>