web-dev-qa-db-fra.com

Vue.js: Attribuer un titre de page à différents itinéraires

Je construis une application Web avec vue.js v1.0, vue-router v0.7 et WebPack. Je suis composant de fichier unique modèle et ont différents composants pour chaque page.

Je ne sais pas comment je pourrais changer le titre de la page dans différents routages (ou peut-être différents composants) lorsque je navigue dans les pages d'applications Web. Je souhaite également que les titres de page soient disponibles dans l'historique du navigateur.

javascriptvue.jsvue-router
9
jmosawy

En plus de la solution que j'ai précédemment publiée ici, il existe une deuxième méthode que j'ai découverte après quelques recherches: use Navigation Guards

Comme indiqué dans ma réponse précédente, voici le problème: vue-router peut commencer à réutiliser composants de route après avoir été créé pour la première fois. Il n'est vraiment pas nécessaire de détruire ces composants sur route-exit et de les recréer lors d'une entrée de route ultérieure. Par conséquent, le crochet created de ma solution précédente ne peut pas être activé lors de visites ultérieures sur le même itinéraire. Par conséquent, notre titre de fenêtre peut ne pas fonctionner comme prévu.

Pour résoudre ce problème, nous pouvons définir le titre de la fenêtre sur un événement route-change. L'instance de routeur a un hook afterEach qui est appelé après le changement de route. Ceci peut être utilisé pour définir le titre de la fenêtre comme détaillé ci-dessous:

// Let's say this is your router instance, with all "Named Routes"
const ROUTER_INSTANCE = new VueRouter({
    mode: "history",
    routes: [
        { path: "/", name: "HomeComponentName", component: HomeComponent },
        { path: "/about", name: "AboutComponentName", component: AboutComponent },
        { path: "*", name: "RouteErrorName", component: RouteError }
    ]
})

// Assign page titles for each of the "named routes"
// Reason: This allows us to have short named routes, with descriptive title
const PAGE_TITLE = {
    "HomeComponentName": "Your Dashboard",
    "AboutComponentName": "About Us Page",
    "RouteErrorName": "Error: Page not found"
}

ROUTER_INSTANCE.afterEach((toRoute, fromRoute) => {
    window.document.title = PAGE_TITLE[toRoute.name]
    console.log(toRoute)  // this lets you check what else is available to you here
})

Cela ne vous aidera peut-être pas si vous naviguez entre des itinéraires similaires, comme "/ user/foo" vers "/ user/bar". Si vous voulez un nom d'utilisateur dans la barre de titre ou des informations spécifiques à une page dynamique, consultez Réagissant aux changements de paramètres comme indiqué dans http://router.vuejs.org/fr/essentials/dynamic-matching.html . Sur la base de la documentation, nous devrions pouvoir utiliser watch dans le composant comme suit:

watch: {
    '$route' (toRoute, fromRoute) {
        window.document.title = "some page title"
    }
}

J'espère que ça aide!

9
Mani

J'ai également eu le même problème il y a quelques jours et j'ai résolu le problème suivant dans la définition de mon composant d'itinéraire:

export default {
    created: function() {
        window.document.title = "Page Title for this route"
        ...
    },
    ...
}

Ce n'est vraiment pas la bonne façon de le faire. Raison: je pars du principe que le composant route est créé chaque fois que vous changez de route. C'est vrai dans vue-router pour l'instant, mais peut changer dans le futur.

J'utilisais ui-router dans Angular 1.4 plus tôt, ce qui permet à composants de route de vivre en mémoire (états collants), de sorte que le changement de route soit instantané la prochaine fois. Si vue-router implémente quelque chose de similaire à états collants , la méthode ci-dessus de définition du titre dans le crochet created échouera.

Mais jusqu'à ce que cela se produise, vous pouvez utiliser cette solution.

4
Mani

J'ai une solution et je l'ai utilisée sur l'un de mes projets .

Commencez par créer une directive.

Vue.directive('title', {
  inserted: (el, binding) => document.title = binding.value,
  update: (el, binding) => document.title = binding.value
})

Supposons que nous travaillions sur le fichier 'MyComponent.vue'.

Puis utilisez cette directive sur le composant router-view.

<router-view v-title="title" ></router-view>

export default {
  data(){
    return {
      title: 'This will be the title'
    }
  }
}

Cela fonctionne même si le composant est mis à jour ou si la page est rechargée.

A très bien fonctionné pour moi !!

2
Faiyaz Shaikh