Vue 路由设置title

1.在index.js中为需要添加title的路由地址增加meta

// 引入Vue
import Vue from 'vue'
// 引入router
import Router from 'vue-router'
// 引入组件
import Index from '@/components/Index'
import Found from '@/components/Found'
import DataStock from '@/components/DataStock'
import My from '@/components/My'
//注明使用router
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',//路由地址--根路径
      component: Index,
            meta: {
        title: '首页'
      }
    },
        {
            path:'/index.html',
            component:Index,
            meta: {
        title: '首页'
      }
        },
        {
            path:'/found.html',
            component:Found,
            meta: {
        title: '发现'
      }
        },
        {
            path:'/dataStock.html',
            component:DataStock,
            meta: {
        title: '资料库'
      }
        },
        ,
        {
            path:'/my.html',
            component:My,
            meta: {
        title: '我的'
      }
        }
  ],
    mode:'history'
})

2.在main.js中设置title

// 引入vue
import Vue from 'vue'
//引入模板
import App from './App'
//引入router
import router from './router'

//CSS
// import '../static/css/common.css'

Vue.config.productionTip = false

new Vue({
    el: '#app',
    router,
    template: '<App/>',//模板
    components: { App },//组件
    
 
})

router.beforeEach((to, from, next) => {
    document.title = to.meta.title
    next()
})
// index.html-->main.js-->App.vue(组件)