1. 程式人生 > >Vue專案中設定每個單頁面的標題

Vue專案中設定每個單頁面的標題

兩種實現方法,第一種方法引入外掛,第二種為程式設計方式實現(推薦)

首先在路由檔案index.js中給每個單頁面路由新增title

routes: [{
    path: '/',
    name: 'index',
    component: index,
    meta:{
        title:'首頁標題'
    }
    },{
    path:'/detail',
    name:'detail',
    component:detail,
    meta:{
        title:'詳情頁標題'
    }
}]
第一種方法:引入vue-wechat-title外掛

1.下載安裝外掛依賴

npm install vue-wechat-title --save-dev

2.在入口檔案main.js中引入並使用

import VueWechatTitle from 'vue-wechat-title'
Vue.use(VueWechatTitle)

3.在app.vue中修改<router-view>標籤

<router-view v-wechat-title='$route.meta.title'></router-view>

第二種方法:程式設計方式實現

直接在入口檔案main.js中新增如下程式碼即可

router.beforeEach((to, from, next) => {
  /* 路由發生變化修改頁面title */
  if (to.meta.title) {
    document.title = to.meta.title
  }
  next()
})
完啦,嚕啦啦.......