vue 修改路由名字_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: '',//模板

components: { App },//组件

})

router.beforeEach((to, from, next) => {

document.title = to.meta.title

next()

})

// index.html-->main.js-->App.vue(组件)