Vue项目如何设置每个页面的title?

因为vue项目中只有一个Index.html 文件
显然不能够通过在index.html文件中添加title来实现设置每个页面的title
这个时候可以借助vue-router来设置每个页面的title;

主要分以下两个步骤：

1、添加meta属性

// 引入vue模块
import Vue from 'vue'
// 引入路由模块
import Router from 'vue-router'
import MajorAdmissionAlgorithm from '../view/MajorAdmissionAlgorithm'
import GasSafetyInspector from '../view/GasSafetyInspector'
Vue.use(Router)
// 定义路由实例
const router = new Router({
  mode: 'history',
  routes: [
    // 配置路由选项  path是访问路径  component是指对应路径要访问的组件
    {
      path: '/',
      redirect: '/majorAdmissionAlgorithm',
      meta: {
        title: '重大准入算法画像'
      }
    },
    {
      path: '/majorAdmissionAlgorithm',
      name: 'MajorAdmissionAlgorithm',
      component: MajorAdmissionAlgorithm,
      meta: {
        title: '重大准入算法画像'
      }
    },
    {
      path: '/gasSafetyInspector',
      name: GasSafetyInspector,
      component: GasSafetyInspector,
      meta: {
        title: '燃气安全督察场景'
      }
    }
  ]
})
// 将路由实例暴露出来
export default router

2、在每一个meta里面设置页面的title名字，最后在遍历

// 这个方法是为了每个页面添加属于自己的title
router.beforeEach((to, from, next) => {
  if (to.meta.title) {
    document.title = to.meta.title
  }
  next()
})

3、总的代码

// 引入vue模块
import Vue from 'vue'
// 引入路由模块
import Router from 'vue-router'
import MajorAdmissionAlgorithm from '../view/MajorAdmissionAlgorithm'
import GasSafetyInspector from '../view/GasSafetyInspector'
Vue.use(Router)
// 定义路由实例
const router = new Router({
  mode: 'history',
  routes: [
    // 配置路由选项  path是访问路径  component是指对应路径要访问的组件
    {
      path: '/',
      redirect: '/majorAdmissionAlgorithm',
      meta: {
        title: '重大准入算法画像'
      }
    },
    {
      path: '/majorAdmissionAlgorithm',
      name: 'MajorAdmissionAlgorithm',
      component: MajorAdmissionAlgorithm,
      meta: {
        title: '重大准入算法画像'
      }
    },
    {
      path: '/gasSafetyInspector',
      name: GasSafetyInspector,
      component: GasSafetyInspector,
      meta: {
        title: '燃气安全督察场景'
      }
    }
  ]
})
// 这个方法是为了每个页面添加属于自己的title
router.beforeEach((to, from, next) => {
  if (to.meta.title) {
    document.title = to.meta.title
  }
  next()
})
// 将路由实例暴露出来
export default router

4、 beforeEach函数的讲解：

三个参数分别的意思：

• to:router即将进入的路由对象
• from:当前导航即将离开的路由
• next:Function,进行管道中的一个钩子，如果执行完了，则导航的状态就是 confirmed （确认的）；否则为false，终止导航。