Vue專案中設定每個單頁面的標題
阿新 • • 發佈:2019-01-07
兩種實現方法,第一種方法引入外掛,第二種為程式設計方式實現(推薦)
首先在路由檔案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() })