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

vue中如何改变title标题

2018年11月02日 发布 阅读(9770) 作者: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';
  2. Vue.use(VueMeta, {
  3. // 定义组件中的数据对象
  4. keyName: 'head',
  5. });

组件中设置

  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 国际 许可协议,如需转载,请注明出处