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

NO IMAGE
1 Star2 Stars3 Stars4 Stars5 Stars 給文章打分!
Loading...

基本環境配置: 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

相關文章

前端開發 最新文章