VueJS项目导航栏配置咨询：如何实现除登录页外全局显示

Hey Alec, this is totally feasible—here are a couple of straightforward, practical ways to implement this in your VueJS project:

Whether you're using Vue 2 or Vue 3, these methods will get the job done smoothly.

Method 1: Direct Route Path Check (Simple & Quick) #

In your root App.vue component, you can conditionally render the navbar by checking the current route's path.

For Vue 2 / Vue 3 Options API: #

<template>
  <div id="app">
    <!-- Only render Navbar if we're NOT on the login page (/) -->
    <Navbar v-if="$route.path !== '/'"/>
    <router-view />
  </div>
</template>

<script>
import Navbar from './components/Navbar.vue'

export default {
  components: { Navbar }
}
</script>

For Vue 3 Composition API: #

<template>
  <div id="app">
    <Navbar v-if="currentRoutePath !== '/'"/>
    <router-view />
  </div>
</template>

<script setup>
import Navbar from './components/Navbar.vue'
import { useRoute } from 'vue-router'

const route = useRoute()
const currentRoutePath = route.path
</script>

Method 2: Route Meta Fields (Scalable for Future Pages) #

If you think you might add more pages later where you want to hide the navbar, using route meta fields is a more flexible approach.

First, update your router config (usually router/index.js):

const routes = [
  {
    path: '/',
    name: 'Login',
    component: Login,
    // Mark this route to hide the navbar
    meta: { hideNavbar: true }
  },
  {
    path: '/dashboard',
    name: 'Dashboard',
    component: Dashboard
    // No meta field = navbar shows by default
  },
  {
    path: '/profile',
    name: 'Profile',
    component: Profile
  }
]

Then adjust App.vue to check the meta field:

Vue 2 / Options API: #

<template>
  <div id="app">
    <Navbar v-if="!$route.meta.hideNavbar"/>
    <router-view />
  </div>
</template>

Vue 3 Composition API: #

<template>
  <div id="app">
    <Navbar v-if="!route.meta.hideNavbar"/>
    <router-view />
  </div>
</template>

<script setup>
import Navbar from './components/Navbar.vue'
import { useRoute } from 'vue-router'

const route = useRoute()
</script>

This way, any new route where you want to hide the navbar just needs the hideNavbar: true meta tag—super easy to maintain as your project grows.

Let me know if you hit any snags getting this set up! 😊

内容的提问来源于stack exchange，提问作者Alec