Vue.js 控制路由和菜单显示隐藏 - 完整指南

本文将详细介绍如何使用 Vue Router 和 Vue.js 条件渲染功能来控制路由和菜单的显示隐藏，实现更灵活的导航和页面管理。

1. 使用 Vue Router 定义路由和组件

import Vue from 'vue';
import Router from 'vue-router';

import Home from '@/components/Home';
import About from '@/components/About';
import Contact from '@/components/Contact';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/about',
      name: 'About',
      component: About
    },
    {
      path: '/contact',
      name: 'Contact',
      component: Contact
    }
  ]
});

2. 在 Vue 组件中使用条件渲染来显示或隐藏菜单和路由

在 Vue 组件中，可以使用 v-if 或 v-show 指令来根据条件显示或隐藏元素。

2.1. 在 App.vue 组件中控制菜单显示

<template>
  <div>
    <nav v-if="$route.path !== '/'">
      <!-- 菜单内容 -->
    </nav>
    <router-view></router-view>
  </div>
</template>

这段代码使用 v-if 指令，当当前路由路径不等于 '/' 时，则显示导航菜单。

2.2. 在菜单组件中高亮选中菜单项

<template>
  <nav>
    <ul>
      <li :class="{ active: $route.path === '/' }"><router-link to="/">Home</router-link></li>
      <li :class="{ active: $route.path === '/about' }"><router-link to="/about">About</router-link></li>
      <li :class="{ active: $route.path === '/contact' }"><router-link to="/contact">Contact</router-link></li>
    </ul>
  </nav>
</template>

<style>
.active {
  background-color: #ccc;
}
</style>

这段代码使用 :class 属性绑定，根据当前路由路径来动态添加 active 类名，实现菜单项的高亮效果。

通过以上步骤，您就可以根据路由路径来控制菜单和路由的显示隐藏，实现更灵活的导航和页面管理。