vue中动态设置meta标签和title标签

1,898 阅读1分钟

路由发生变化修改页面 【meta】、路由发生变化修改页面【title】

//router内的设置
{
  path: '/home',
  name: 'Home',
  component: Home,
  meta: {
    title:"首页",
    content: '首页内容'
  }
},
{
  path: '/user',
  name: 'User',
  component: User,
  meta: {
    title: "用户",
    content: '用户内容'
  }
},
//main.js里面的代码
router.beforeEach((to, from, next) => {
  /* 路由发生变化修改页面meta */
  if(to.meta.content){
    let head = document.getElementsByTagName('head');
    let meta = document.createElement('meta');
    meta.content = to.meta.content;
    head[0].appendChild(meta)
  }
  /* 路由发生变化修改页面title */
  if (to.meta.title) {
    document.title = to.meta.title;
  }
  next()
});