VueJS中this.$route.name返回undefined，导航栏显示控制求助

核心问题 #

1. this.$route.name 输出 undefined，是因为路由配置文件中没有给 login 和 register 路由设置 name 属性。
2. 逻辑完全搞反：需求是「非登录/注册页显示导航栏」，但当前代码是路由为login/register时flag才为true，导致导航栏只在登录/注册页显示，和需求相反。
3. mounted 钩子仅在组件初始化时执行一次，路由切换时不会重新调用判断方法，导航栏状态无法随路由更新。

步骤1：补全路由的name属性 #

打开路由配置文件（通常是 src/router/index.js），为 login 和 register 路由添加 name 字段：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '../views/Login.vue'
import Register from '../views/Register.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/login',
    name: 'login', // 必须添加该字段
    component: Login
  },
  {
    path: '/register',
    name: 'register', // 必须添加该字段
    component: Register
  },
  // 其他路由配置...
]

const router = new VueRouter({
  routes
})

export default router

步骤2：修正导航栏显示逻辑（两种可选方案） #

方案1：使用计算属性（推荐） #

直接通过计算属性实时判断路由状态，无需额外方法和data变量：

<template>
  <div id="app">
    <!-- 非登录/注册页时显示导航栏 -->
    <NavBar v-if="shouldShowNavBar" />

    <main>
      <router-view/>
    </main>
  </div>
</template>

<script>
import NavBar from './components/NavBar.vue';

export default {
  components: { NavBar },
  computed: {
    shouldShowNavBar() {
      // 判断当前路由name是否不是login或register
      return !['login', 'register'].includes(this.$route.name);
    }
  }
}
</script>

方案2：保留方法+监听路由变化 #

如果想保留原有方法结构，需添加路由监听，确保路由切换时重新执行判断：

<template>
  <div id="app">
    <NavBar v-if="flag" />

    <main>
      <router-view/>
    </main>
  </div>
</template>

<script>
import NavBar from './components/NavBar.vue';

export default {
  components: { NavBar },
  data(){
    return{
      flag: false
    }
  },
  watch: {
    // 监听路由变化，每次切换时重新判断
    '$route'() {
      this.checkRouteForNavBar();
    }
  },
  mounted() {
    this.checkRouteForNavBar();
  },
  methods : {
    checkRouteForNavBar: function(){
      // 修正逻辑：非登录/注册页时显示导航栏
      this.flag = !['login', 'register'].includes(this.$route.name);
      console.log('当前路由name:', this.$route.name);
      console.log('导航栏显示状态:', this.flag);
    }
  }
}
</script>

额外优化 #

• 移除 mounted 钩子中无用的 return { id } 代码，mounted 不需要返回值，如需使用localStorage的id，可放到data或直接在需要的地方调用。
• 样式中 background-image 路径可能存在问题，Vue中静态资源建议放在public目录下，或使用@别名（如@/assets/plot.png）。

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