Vue 的 title 动态设置到这里为止，你是否还在每一个页面单独定义 title，然后 find-and-replace 替换的费劲？本文将带大家了解如何使用 Vue.js 来动态渲染页面

title

。

首先，我们需要在

vue-router

中定义一些规则，以便在不同的路由下动态定义

title

。假设你的路由定义如下：

const routes = [
  {
    path: '/',
    component: Home,
    meta: {
      title: 'Welcome'
    }
  },
  {
    path: '/about',
    component: About,
    meta: {
      title: 'About'
    }
  }
];

定义了路由规则后，我们要在页面中渲染出我们定义好的

title

。我们可以在任何组件中包含以下代码：

<template>
  <div>
    <h1>Hello, world!</h1>
  </div>
</template>

<script>
  export default {
    name: 'MyComponent',
    metaInfo: {
      title: 'My Component Title'
    }
  };
</script>

在每个页面组件中都写这样一段代码是很繁琐的，我们可以利用 Vue Mixin 功能来重用这段代码，新建一个

mixins

目录，然后在里面新建一个

titleMixin.js

文件，代码如下：

export default {
  mounted() {
    if (this.$route.meta.title) {
      document.title = this.$route.meta.title;
    }
  }
};

然后在每个页面组件中引用这个 Mixin：

<template>
  <div>
    <h1>Hello, world!</h1>
  </div>
</template>

<script>
  import titleMixin from '@/mixins/titleMixin.js';

  export default {
    name: 'MyComponent',
    mixins: [titleMixin],
    metaInfo: {
      title: 'My Component Title'
    }
  };
</script>

到这里，我们已经完成了 Vue 中动态渲染

title

的全部流程。使用 Mixin，我们可以重用代码，也具有灵活性，适用于各种页面需求。