Dynamische Navigationskomponente in Vue.js

Question

Die Idee ist, in der Vue-Instanz 'boolesches' isActive-Array zu haben, um es bei jedem Laden der navbar zu aktualisieren, dh mit dem aktuellen Seitennamen aus der URL als Index in das Array und setze seinen Wert auf true; und 'onbeforeunload' setzt es auf 'false'.

Navbar.vue

<template> 
    <div class="navbar"> 
    <nav> 
     <ul> 
     <li v-bind:class="{ active: isActive['login'] }"> 
      <a href="/login">Log in</a> 
     </li> 
     <li v-bind:class="{ active: isActive['signup'] }"> 
      <a href="/signup">Sign up</a> 
     </li> 
     </ul> 
    </nav> 
    </div> 
</template> 

<script>  
    import Vue from 'Vue' 

    var navbarOpts = { 
    name: 'navbar', 
    data { 
     return { 
     isActive: [] 
     } 
    } 
    }) 
    module.exports = navbar 

    function pageName(pathname) {} // Returns no-spaced string 

    var currentPage = pageName(window.location.pathname) 

    if (currentPage !== '') { // If not in home page 
    navbar.data().isActive[currentPage] = true 
    window.onbeforeunload = function() { 
     navbar.data().isActive[currentPage] = false 
    } 
    } 
</script> 

Hier würde ich reaktiv die aktuelle Seite Index aktualisieren (Beispiel: 'login') in der Anordnung zu wahren, und als neue besuchten Seiten erhalten (Beispiel: 'Registrierung') Sie werden als Indizes hinzugefügt und auf Wahr gesetzt; und vor dem Entladen von Ressourcen auf false gesetzt.

Vielleicht sollte ich Vue.set(vm.isActive, currentPage, false) verwenden, damit eine neue Eigenschaft reaktiv zu vm.isActive hinzugefügt wird, wenn sie nicht existiert oder aktualisiert wird. Das Problem ist, dass es keinen Sinn hat, eine Vue-Instanz zu erstellen, da ich sie nicht exportieren kann. Und wenn ich die navbarOpts modifiziere und sie wie ich verkaufe, wird navbarOpts jedes Mal erstellt, wenn Navbar.vue gerendert wird und alles, was es enthält, verloren geht.

Answer 1

ich es endlich übergeben verwendete Objekt exportieren sollte erstellen gelöst anderen Ansatz Ich denke, mehr korrekt ist .

Navbar.vue

<template> 
    <div class="navbar"> 
    <nav> 
     <ul> 
     <li v-bind:class="{ active: isActive('login') }"> 
      <a href="/login">Log in</a> 
     </li> 
     <li v-bind:class="{ active: isActive('signup') }"> 
      <a href="/signup">Sign up</a> 
     </li> 
     </ul> 
    </nav> 
    </div> 
</template> 

<script> 
    export default { 
    name: 'navbar', 
    data() { 
     return { 
     path: window.location.pathname 
     } 
    }, 
    methods: { 
     isActive (page) { 
     return this.currentPage === page 
     } 
    }, 
    computed: { 
     currentPage() { 
     if (this.path.length === 1) return '' 
     const endIndex = this.path.indexOf('/', 1) 
     return (endIndex === -1) 
      ? this.path.substring(1) 
      : this.path.substring(1, endIndex) 
     } 
    } 
    } 
</script> 

Answer 2

Sie verwenden das Dateiformat für einzelne Dateien nicht korrekt. Sie erstellen eine Komponente Instanz und Export, die, wo man nur die Optionen eine Komponente (das Objekt, das Sie new Vue({... This object })