recherche

Maison  >  Questions et réponses  >  le corps du texte

javascript - Comment Vue empêche-t-il n'importe quelle page à onglet de revenir au premier onglet après l'avoir actualisé?

Comme dans l'exemple ci-dessus, lorsque je clique sur la page du terrain d'entraînement sur la page initiale du coach et que je parcoure la page du terrain d'entraînement, elle s'actualise, mais je ne veux pas revenir à la colonne du coach. Comment puis-je y parvenir ?

De même, lorsque je sélectionne la condition de filtre District de Nanshan, je clique pour sélectionner un terrain d'entraînement dans la liste à afficher, mais à mon retour, je souhaite le conserver dans l'état sélectionné du district de Nanshan (au lieu de toutes les zones du début), comment y parvenir ?

De plus, j'ai déjà vérifié sur Internet et découvert que quelqu'un avait proposé cette méthode :
1 Utilisez vuex pour enregistrer le statut
2 Stockez la boutique vuex dans localStorage
3 Après avoir actualisé la page, lisez localStorage pour initialiser la boutique vuex.
Je voudrais demander comment accomplir ?

阿神阿神2742 Il y a quelques jours1427

répondre à tous(3)je répondrai

  • 漂亮男人

    漂亮男人2017-05-18 11:04:28

    Vous avez déjà mentionné les 3 points ci-dessus, faites-le.
    Fournissez une idée :
    Lorsque vous cliquez pour passer de l'onglet 1 à l'onglet 2, enregistrez une marque localement, par exemple :

    sessionStorage.setItem("flag", "1");
    

    A ce moment, vous actualisez le navigateur tab2, et js détermine si le drapeau existe localement. S'il existe, tab2 est activé sinon, il revient à tab1.

    Notez que l'indicateur stocké localement est supprimé lorsque tab1 est initialisé.

    répondre
    0
  • phpcn_u1582

    phpcn_u15822017-05-18 11:04:28

    Comme mentionné au premier étage, ajoutez l'indicateur d'étiquette actuel aux données d'option de l'instance Vue

    new Vue({
      el: '#app',
      data: {
        currentTab: localStorage.getItem('currentTab') || 0,
        tabItems: [
         // 标签数据
        ]
      },
      methods: {
        // 切换标签事件
        switchTab: function(index) {
            // 相关逻辑 ...
            localStorage.setItem('currentTab', index);
        }
      }
    })
    

    C'est probablement l'idée, j'espère que ça pourra servir de référence pour l'affiche

    répondre
    0
  • PHP中文网

    PHP中文网2017-05-18 11:04:28

    Ecrire les paramètres sur l'itinéraire est aussi une méthode

    répondre
    0
  • Annulerrépondre