首页
Javascript
Html
Css
Node.js
Electron
移动开发
小程序
工具类
服务端
浏览器相关
前端收藏
其他
关于
公司注册

vue中如何改变title标题

2018年11月02日 发布 阅读(9451) 作者：Jerman

vue项目中，如何改变页面title呢？

1.最粗爆的

直接使用document.title

  1. router.beforeEach(({ to, from, next }) => {
  2.      document.title = to.title || 'XXX.COM'
  3. })
2.在router中设置meta

下面代码中的title即是页面的title，路由改变时会自动改变

  1. // 登录
  2. {
  3.     path: '/login',
  4.     component: () => import(/* webpackChunkName: "login" */'./views/login.vue'),
  5.     meta: {
  6.         title: '登录'
  7.     }
  8. }
3.使用vue-meta插件(推荐)

使用vue-meta插件，我们可以在组件中去设置title，比较符合正常的思维，还可以设置description

安装插件

  1. npm install vue-meta --save

入口文件中设置：

  1. import VueMeta from 'vue-meta';
  3. Vue.use(VueMeta, {
  4.     // 定义组件中的数据对象
  5.     keyName: 'head',
  6. });

组件中设置

  1. <script>
  2. export default {
  3.     head: {
  4.         title: "登录",
  5.         meta:[
  6.             { name: 'description', content: '登录'}
  7.         ]
  8.     },
  9. ...省略...
  10. </script>

在App.vue入口模块中，可以设置title模板
设置下面代码后，如登录页面的title其实变成了 “登录 - XX有限公司”

  1. <script>
  2. export default {
  3.     head: {
  4.         titleTemplate(title) {
  5.             title = typeof title === "function" ? title(this.$store) : title;
  6.             return title ? `${title} - XX有限公司` : 'XX有限公司';
  7.         }
  8.     },
  9. ...省略...
  10. </script>
版权声明：本站文章除特别声明外，均采用署名-非商业性使用-禁止演绎 4.0 国际 许可协议，如需转载，请注明出处

© 2018 IMQIANDUAN.COM 粤ICP备18143223号