title: How to change page titles when using vue-router?
body: <p>I would like to specify my titles within the route definition if possible. What is normally specified in <code>&lt;head&gt;&lt;title&gt;</code> and appears in the browser title bar.</p>
  
  <p>I have my project set up as follows:</p>
  
  <p><strong>main.js</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>import Vue from 'vue'
  import App from './App.vue'
  import VeeValidate from 'vee-validate';
  import router from './router'
  import ElementUI from 'element-ui';
  import 'element-ui/lib/theme-chalk/index.css';
  
  Vue.use(VeeValidate);
  Vue.use(ElementUI);
  Vue.config.productionTip = false
  
  new Vue({
      router,
      render: h =&gt; h(App)
  }).$mount('#app')
  </code></pre>
  
  <p><strong>router.js</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>import Vue from 'vue'
  import Router from 'vue-router'
  import Skills from './components/Skills.vue'
  import About from './components/About.vue'
  
  Vue.use(Router)
  
  export default new Router({
    routes: [
      {
        path: '/',
        name: 'skills',
        component: Skills,
        meta: { title: 'Skills - MyApp' } // &lt;- I would to use this one
      },
      {
        path: '/about/:name',  // Add /:name here
        name: 'about',
        component: About,
        meta: { title: 'About - MyApp' }
      }
    ]
  })
  </code></pre>
  
  <p>Preferably, I would want an automatic system instead of changing page title on the created function of every component. Thanks.</p>