导航栏的vue js嵌套路由设置

时间:2021-03-22 06:34:09

标签: javascript vue.js

我试图让我的项目有 2 种导航栏,我已经阅读了一些文档并在 youtube 上搜索教程,我没有找到与我的问题相关的任何内容,我想要 2 种导航-每条路线的栏,而无需在每个页面上刷新它。我将我的导航栏放在当前项目中的应用程序文件上,但我想做的是制作另一个嵌套路由,显示另一个导航栏并拥有自己的路由,谁能帮我解决这个问题?简单的代码示例将不胜感激。

1 个答案:

答案 0 :(得分:1)

您可以使用 $route.meta 来控制要显示的导航栏。这是一个简单的解决方案,但您必须始终注意 nav(或设置默认值,如下面的代码段所示):

const Foo = {
  template: `
    <div>This is Foo</div>
  `
}

const Bar = {
  template: `
    <div>This is Bar</div>
  `
}

const routes = [{
    path: "/",
    redirect: "/foo",
  },
  {
    path: "/foo",
    component: Foo,
    meta: {
      nav: "nav1",
    },
  },
  {
    path: "/bar",
    component: Bar,
    meta: {
      nav: "nav2",
    },
  },
]

const router = new VueRouter({
  routes,
})

new Vue({
  el: "#app",
  components: {
    Foo,
    Bar,
  },
  router,
  computed: {
    computedRoute() {
      return this.$route.meta.nav
    },
  },
})
.link {
  padding: 0 8px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<div id="app">
  <div v-if="computedRoute === 'nav1'">
    <router-link to="/foo" class="link">
      FOO 1
    </router-link>
    <router-link to="/bar" class="link">
      BAR 1
    </router-link>
  </div>
  <div v-else>
    <router-link to="/foo" class="link">
      FOO 2
    </router-link>
    <router-link to="/bar" class="link">
      BAR 2
    </router-link>
  </div>
  <br>
  <hr>
  <router-view />
</div>