Vue.js 中的动态导航组件答案

【问题标题】：Dynamic navigation component in Vue.jsVue.js 中的动态导航组件
【发布时间】：2017-06-14 01:54:25
【问题描述】：

这个想法是在 Vue 实例中使用 'isActive' 布尔数组，以便在每次加载导航栏时更新它，即使用从 URL 中获取的当前页面名称作为数组中的索引并将其值设置为真的;并将“onbeforeunload”设置为 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>

在这里，我将响应式地将数组中的当前页面索引（例如：'login'）更新为 true，并且随着新页面的访问（例如：'signup'），它们将被添加为索引并设置为 true；并在卸载资源之前设置为 false。

也许我应该使用Vue.set(vm.isActive, currentPage, false)，以便在 vm.isActive 不存在或不更新的情况下将新属性反应性地添加到它。问题是我创建 Vue 实例没有意义，因为我无法导出它。如果我修改 navbarOpts 并像我一样将其导出，那么每次呈现 Navbar.vue 时都会创建 navbarOpts 并且它所保存的所有内容都会丢失。

【问题讨论】：

如果 StackOverflow 没有帮助，您可能还想尝试 Gitter 聊天：gitter.im/vuejs/vue；他们在那里非常有帮助。

标签： javascript vue.js

【解决方案1】：

您没有正确使用单个文件组件格式。您创建一个组件 instance 并将其导出，您应该只导出用于创建组件的 options 对象（传递给 new Vue({... This object })

的对象

【讨论】：

太好了，这就是问题所在。解决方案是将我之前传递给 Vue 构造函数的对象保存在导航栏中，然后将其导出。现在，我不能使用 Vue 的任何方法，如 arr.$set 或 Vue.set 来反应性地向数组添加索引，对吧？
这些方法你都可以用，别担心。
我更新了代码并更好地描述了问题，有没有办法解决这个问题？我想出了另一种方法，但我真的很想知道我所描述的是否可行。

【解决方案2】：

我终于用另一种我认为更正确的方法解决了。

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>

【讨论】：

【解决方案3】：

你可以利用路由的路径属性，查看doc here...

<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>

【讨论】：