javascript - Vue.js 中的动态导航组件

Question

这个想法是在 Vue 实例中拥有“isActive” bool 数组，以便每次加载导航栏时更新它，即使用从 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>

在这里，我会 react 性地将数组中的当前页面索引(例如:“登录”)更新为 true，并且当访问新页面(例如:“注册”)时，它们将被添加为索引并设置为 true；并在卸载资源之前设置为 false。

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

Answer 1

您没有正确使用单文件组件格式。您创建一个组件实例并导出它，您应该只导出用于创建组件的选项对象(您传递给new Vue({ ...这个对象})