vue中导航栏开关由缓存中变量控制，默认关闭，其他页面关闭缓存中变量为true，导航开关打开，完整实例代码

下面是一个完整的Vue.js实例代码，实现了根据缓存中的变量控制导航栏的开关，默认情况下导航栏是关闭的。当其他页面关闭缓存中的变量时，导航栏会打开。

<template>
  <div>
    <nav v-show="showNav">
      <!-- 导航栏内容 -->
    </nav>
    <button @click="toggleNav">Toggle Navigation</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showNav: false
    }
  },
  mounted() {
    const cachedShowNav = localStorage.getItem('showNav')
    if (cachedShowNav !== null && cachedShowNav === 'true') {
      this.showNav = true
    }
  },
  methods: {
    toggleNav() {
      this.showNav = !this.showNav
      localStorage.setItem('showNav', this.showNav)
    }
  }
}
</script>

在上面的代码中，我们使用了Vue.js的`v-show`指令来控制导航栏的显示和隐藏。在组件挂载时，我们从本地存储中读取之前保存的`showNav`变量，如果变量值为`true`，则显示导航栏。当用户点击“Toggle Navigation”按钮时，我们通过`toggleNav`方法切换`showNav`变量的值，并把当前的值保存到本地存储中，以便在刷新页面后仍然能够保持导航栏的状态。