Vue-ブラウザtitleを動的に変更
1034 ワード
ステップ1:Vueのルーティングファイルrouterを見つけます.js(vue 2.0 routerディレクトリ下index.js)
赤いワイヤフレーム内のコードを、const router=new Router({})に変更します.次の図に示します.
変更前:
変更後:
ステップ2:ルーティング・ファイルの一番下に次のコードを追加します.
ステップ3:タイトルを設定するルーティング項目にmetaオブジェクトを追加します.オブジェクトにはブラウザtitleを設定するためのtitleプロパティが含まれています.
例を挙げます.
これで解決したが1つのタイトルしかないという問題も適用され,動的処理はブラウザtitleを構成した.
赤いワイヤフレーム内のコードを、const router=new Router({})に変更します.次の図に示します.
変更前:
export default new Router({
routes: [
{
path: '/',
redirect: '/Register'
}
]
変更後:
const router = new Router({
routes: [
{
path: '/',
redirect: '/Register'
}
]
ステップ2:ルーティング・ファイルの一番下に次のコードを追加します.
//
router.beforeEach((to, from, next) => {
/* title */
if (to.meta.title) {
document.title = to.meta.title
}
next()
})
export default router
ステップ3:タイトルを設定するルーティング項目にmetaオブジェクトを追加します.オブジェクトにはブラウザtitleを設定するためのtitleプロパティが含まれています.
例を挙げます.
{
name: 'home',
path: '/Home',
component: Home,
meta: {
keepAlive: true,
title: ' - '
}
},
これで解決したが1つのタイトルしかないという問題も適用され,動的処理はブラウザtitleを構成した.