Question

我们的想法是在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，并且它所拥有的一切都会丢失。

Answer 1

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

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

Answer 3

您可以利用路线的path属性，查看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>

Vue.js中的动态导航组件

3 个答案: