BinaryDevelop
  1. ホーム
  2. vue.js

vue-router使用時にページタイトルを変更する方法は？

2023-09-20 05:28:06

質問

可能であれば、ルート定義内でタイトルを指定したいです。通常 <head><title> で指定し、ブラウザのタイトルバーに表示されるものです。

私のプロジェクトは以下のように設定されています。

main.js 

import Vue from 'vue'
import App from './App.vue'
import VeeValidate from 'vee-validate';
import router from './router'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(VeeValidate);
Vue.use(ElementUI);
Vue.config.productionTip = false

new Vue({
    router,
    render: h => h(App)
}).$mount('#app')

ルータ.js 

import Vue from 'vue'
import Router from 'vue-router'
import Skills from './components/Skills.vue'
import About from './components/About.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'skills',
      component: Skills,
      meta: { title: 'Skills - MyApp' } // <- I would to use this one
    },
    {
      path: '/about/:name',  // Add /:name here
      name: 'about',
      component: About,
      meta: { title: 'About - MyApp' }
    }
  ]
})

できれば、各コンポーネントの作成機能でページタイトルを変更するのではなく、自動で変更する仕組みが欲しいです。ありがとうございます。

どのように解決するのですか？

ルータ定義でナビゲーションガードを使用することができます。 

import Vue from 'vue';

const DEFAULT_TITLE = 'Some Default Title';
router.afterEach((to, from) => {
    // Use next tick to handle router history correctly
    // see: https://github.com/vuejs/vue-router/issues/914#issuecomment-384477609
    Vue.nextTick(() => {
        document.title = to.meta.title || DEFAULT_TITLE;
    });
});

エクスポートを変更して 

const router = new Router({ ... });
...
export default router;

または、ルートコンポーネントの即時ウォッチャーを使用することもできます。 

export default {
    name: 'App',
    watch: {
        $route: {
            immediate: true,
            handler(to, from) {
                document.title = to.meta.title || 'Some Default Title';
            }
        },
    }
};

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します