使用vue-router設定每個頁面的title方法，vue-routertitle

使用vue-router設定每個頁面的title方法，vue-routertitle

基本環境配置： webpack + vue2.0 + vue-router +nodeJS

進入 router 檔案夾底下的index.js檔案

首先引入：

import Vue from 'vue'import Router from 'vue-router'

然後在路由裡面配置每個路由的地址：

routes: [ {   /* （首頁）預設路由地址 */  path: '/',  name: 'Entrance',  component: Entrance,  meta: {  title: '首頁入口'  } }, {   /* 修改暱稱 */  path: '/modifyName/:nickName',  name: 'modifyName',  component: modifyName,  meta: {  title: '修改暱稱'  } }, {   /* 商品詳情 */  path: '/goodsDetail',  name: 'goodsDetail',  component: goodsDetail,  meta: {  title: '商品詳情'  } }, { /* Not Found 路由，必須是最後一個路由 */  path: '*',  component: NotFound,  meta: {  title: '找不到頁面'  } } ]

在每一個meta裡面設定頁面的title名字，最後在遍曆

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

這樣就為每一個VUE 的頁面添加了title

以上這篇使用vue-router設定每個頁面的title方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援幫客之家。