web-dev-qa-db-fra.com

Comment changer les titres des pages lors de l'utilisation de vue-router?

Je voudrais spécifier mes titres dans la définition d'itinéraire si possible. Ce qui est normalement spécifié dans <head><title> et apparaît dans la barre de titre du navigateur.

J'ai mon projet configuré comme suit:

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')

router.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' }
    }
  ]
})

De préférence, je voudrais un système automatique au lieu de changer le titre de la page sur la fonction créée de chaque composant. Merci.

vue.jsvuejs2vue-router
11
darkhorse

Vous pouvez utiliser un protecteur de navigation avec la définition de routeur:

const DEFAULT_TITLE = 'Some Default Title';
router.afterEach((to, from) => {
    document.title = to.meta.title || DEFAULT_TITLE;
});

Vous devrez modifier votre exportation en:

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

Ou vous pouvez utiliser un observateur sur votre composant racine:

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

Je voudrais ajouter que ce qui précède ne conserve pas vraiment l'histoire comme il se doit. Voir https://github.com/vuejs/vue-router/issues/914#issuecomment-384477609 pour une meilleure réponse qui s'occupe réellement de l'histoire (quoique un peu hacky).

0
carl-johan.blomqvist