Vue.js 中的動態導航組件

Question

這個想法是在 Vue 實例中有一個 'isActive' 布爾數組，以便在每次加載導航欄時更新它，即使用從 URL 中獲取的當前頁面名稱作為數組中的索引並將其值設置為 true； 和 'onbeforeunload' 將其設置為 false。

導航欄.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>

在這里，我會被動地將數組中的當前頁面索引（例如：'login'）更新為 true，並且隨着新頁面被訪問（例如：'signup'），它們將被添加為索引並設置為 true； 並在卸載資源之前設置為 false。

也許我應該使用Vue.set(vm.isActive, currentPage, false)以便在 vm.isActive 不存在或更新的情況下被動添加一個新屬性。 問題是我創建 Vue 實例毫無意義，因為我無法導出它。 如果我像我一樣修改 navbarOpts 並導出它，每次 Navbar.vue 渲染時都會創建 navbarOpts，並且它所持有的一切都會丟失。

Answer 1

您沒有正確使用單個文件組件格式。 您創建一個組件實例並導出它，您應該只導出用於創建組件的選項對象（您傳遞給new Vue({... This object })

Answer 2

我終於用另一種我認為更正確的方法解決了它。

導航欄.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 3

您可以使用路由的路徑屬性，在此處查看文檔...

<template>
 <div class="sidebar sidebar-main sidebar-fixed">
   <div class="sidebar-content">
      <div class="sidebar-category sidebar-category-visible">
       <div class="category-content no-padding">
        <ul class="navigation navigation-main navigation-accordion">
         <li :class="{ active: isActive('dashboard') }">
          <router-link to="/dashboard">Dashboard</router-link>
         </li>    

         <li :class="{ active: isActive('profile') }">
          <router-link to="/dashboard">Profile</router-link>
         </li>    
        </ul>
       </div>
      </div>
     </div>
    </div>
</template>

<script>
 export default {
  name: 'SideBar',      
  methods: {
   isActive(page) {
     return this.$route.path.indexOf(page) !== -1;
   }
  }
 }
</script>