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

NO IMAGE

基本環境配置: 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方法就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支援指令碼之家。

您可能感興趣的文章:

淺談vue2 單頁面如何設定網頁title