Question

我有一个侧边菜单，我不想在登录/注册页面中显示，我需要在几乎所有其他页面中显示它。我该怎么做呢？

<div id="app ui container">
    <Menu/>
    <router-view/>
</div>

Answer 1

创建一个像

这样的计算属性

showMenu() {
    return this.$route.name !== 'login' && this.$route.name !== 'register';
}

并将v-if="showMenu"添加到您的<Menu/>

Answer 2

有更好的方法来处理这个问题，但由于你没有共享你的代码，你可以使用这样的东西：

computed: {
 hide () {
   return this.$route.path === '/login' || this.$route.path === '/register'; 
 }
}

或者你仍然可以在元素本身上使用hide / show：

 <Menu v-if='this.$route.path !== "login" || this.$route.path !== "/register"'/>

但是，这甚至更少推荐

Answer 3

您应该为登录创建单独的页面，为所有其他页面创建单独的文件夹。
在“登录”页面提供用户身份验证的逻辑，并且每次成功登录都会创建用户会话以导航到用户帐户主页。

Answer 4

// 路由器/index.js

{
    path: '/login',
    name: 'login',
    component: () => import(/* webpackChunkName: "login" */ '../views/Login.vue'),
    meta: {
      hideNavbar: true,
     }
  },

在 App.vue 中你的

<Nav v-if="!$route.meta.hideNavbar" />

不要在vue的注册/登录页面上显示菜单

4 个答案: