web-dev-qa-db-fra.com

Routage Vue.js avec bouton retour

J'utilise déjà cet exemple d'application Vue.js Routing.

https://github.com/chrisvfritz/vue-2.0-simple-routing-example

Dans le src/main.js J'ai tellement de données.

const app = new Vue({
  el: '#app',
  data: {
    currentRoute: window.location.pathname,
    token : "",
    errorMessage : '', etc...etc..
  },

Maintenant, avec socket.io, j'ai défini le jeton sur "sdawdda2d2ada2ad22ad"

Au démarrage de l'application, currentRoute est égal à "/" C'est bon, la première page chargée. src/routes.js

'/': 'Home',
'/about': 'About'

Quand je veux vérifier le/about (url: localhost:8080/about), que cela fonctionne bien, mais le jeton et errorMessage sont à nouveau vides, car l'application a de nouveau créé.

Si je veux changer de page sans perdre la valeur du jeton que je peux utiliser:

this.currentRoute = "/about"       (url: localhost:8080)

Cela fonctionne bien, mais l'URL ne change pas, donc je ne peux pas utiliser le bouton de retour dans le navigateur. Comment puis-je séparer mon application Vue, si je ne veux pas perdre de valeur de jeton lorsque le navigateur va à/about?

Merci beaucoup!

javascriptvue.jsvue-router
7
ketom

Lorsque vous passez de votre route Home à About route, vous devez utiliser <router-link> naviguer.

Depuis votre page home, vous pouvez accéder à la page about comme suit:

<router-link to="/about">Go to my About Page</router-link>

Cela génère une balise d'ancrage html régulière <a> avec le chemin d'accès correctement défini. Lorsque vous cliquez dessus, cela vous amène au composant about, et ne rafraîchit pas la page Web html entière (avec les scripts d'application) à partir du serveur.

Lorsque seul le composant route est modifié, tous vos autres paramètres Vue comme le jeton sur l'instance Vue resteront.

Veuillez consulter le vue-router ici: http://router.vuejs.org/en/essentials/getting-started.html

N'oubliez pas d'avoir un espace réservé pour les itinéraires dans votre application principale, comme suit: <router-view></router-view>. Vos composants Home et About seront rendus dans ce router-view lorsque vous changez d'itinéraire.

2
Mani

vous pouvez faire quelque chose comme this.$router.go(-1) ou vm.$router.go(-1) pour aller de l'avant this.$router.go(1) pour plus cliquez ici

17
Kartik Garasia