vue 修改标题栏_VUE动态修改titile的三种方法

第一种：适用于在已经定义好title的情况下，例如首页，关于页等等

1.1 main.js

const defaultTitle = '默认 title'router.beforeEach((to, from, next)=>{

document.title= to.meta.title ?to.meta.title : defaultTitle

next()

})

1.2 index.js

routes: [

{

name:'home',

path:'/home/:openname',

component: Home,

meta: {

title:'首页'}

}

]

第二种：vue-meta 插件(适用于无法固定title的情况下，例如文章页)

2.1 安装

npm install vue-meta --save

2.2 在main.js引入

import Meta from 'vue-meta'Vue.use(Meta)

2.3 为需要修改的页面单独定义metaInfo

export default{

metaInfo: {

title:'This is the test',

meta: [

{ charset:'utf-8'},

{ name:'viewport', content: 'width=