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