vue 设置每个页面的title

vue 设置每个页面的title

由于vue文件中只有一个Index.html 文件

title 显示需要通过document.title来设置

1.router---index.js文件中添加meta属性

export default new Router({
    // mode: 'history',
  routes: [
      {
      path: '/',
      name: 'Home',
      component: function(resolve){ require(['../components/model/index_home.vue'],resolve)},
      meta: {
        title: '锦穗'
      }
    },{
        //腕表
      path:'/watchPage',
      name:'watchPage',
      component:function(resolve){ require(['../components/model/watchPage/watchPage.vue'],resolve)},
      meta: {
        title: '腕表'
      }
    },{
      path:'/sosPage',
      name:'sosPage',
      component:function(resolve){ require(['../components/model/watchPage/sosPage.vue'],resolve)},
      meta: {
        title: 'sos'
      }
    }]
})

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

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

1.Vue.beforeEach(function(to,form,next){}) /在跳转之前执行/ 2.Vue.afterEach(function(to,form))/在跳转之后判断/ 在路由跳转的时候，我们需要一些权限判断或者其他操作。这个时候就需要使用路由的钩子函数。 定义：路由钩子主要是给使用者在路由发生变化时进行一些特殊的处理而定义的函数。 beforeEach函数有三个参数： to:router即将进入的路由对象 from:当前导航即将离开的路由 next:Function,进行管道中的一个钩子，如果执行完了，则导航的状态就是 confirmed (确认的)；否则为false，终止导航。 afterEach函数不用传next()函数