关于#前端#的问题：想问一下vue后台传递路由，前端生成一级菜单栏，点击菜单栏出现侧边导航栏怎么写呀

Question

想问一下vue后台传递路由，前端生成一级菜单栏，点击菜单栏出现侧边导航栏怎么写呀

Answer 1

在Vue中，可以使用vue-router来实现动态导航菜单，并将路由传递给菜单项，然后根据当前激活的路由来生成侧边导航栏。首先，你需要在Vue项目中安装并配置vue-router。然后，在你的Vue组件中，你可以使用vue-router的this.$router.currentRoute来获取当前激活的路由，并据此生成侧边导航栏。以下是一个简单的示例：
安装并配置vue-router：

npm install vue-router
// 在你的Vue项目中创建一个名为router.js的文件，并在其中配置路由：
import Vue from 'vue';  
import Router from 'vue-router';  
import Home from './components/Home.vue';  
import About from './components/About.vue';  
import Contact from './components/Contact.vue';  
  
Vue.use(Router);  
  
export default new Router({  
  routes: [  
    { path: '/', component: Home },  
    { path: '/about', component: About },  
    { path: '/contact', component: Contact }  
  ]  
});

在你的Vue组件中生成动态导航菜单和侧边导航栏：
在你的Vue组件中，你可以使用this.$router.currentRoute来获取当前激活的路由，并据此生成侧边导航栏。同时，你可以使用v-for指令来动态生成菜单项。以下是一个简单的示例：

html
<template>  
  <div>  
    <nav>  
      <ul>  
        <li v-for="(route, index) in routes" :key="index" :class="{ active: isActive(route) }">  
          <a :href="route.path">{{ route.name }}</a>  
        </li>  
      </ul>  
    </nav>  
    <div id="content">  
      <!-- 根据当前路由，渲染对应的组件 -->  
      <router-view></router-view>  
    </div>  
    <aside>  
      <!-- 侧边导航栏 -->  
      <ul>  
        <li v-for="(route, index) in routes" :key="index" :class="{ active: isActive(route) }">  
          <a :href="route.path">{{ route.name }}</a>  
        </li>  
      </ul>  
    </aside>  
  </div>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      routes: [  
        { path: '/', name: 'Home' },  
        { path: '/about', name: 'About' },  
        { path: '/contact', name: 'Contact' }  
      ]  
    };  
  },  
  methods: {  
    isActive(route) {  
      return this.$router.currentRoute.path === route.path;  
    }  
  }  
};  
</script>

在上面的示例中，我们使用v-for指令来动态生成菜单项和侧边导航栏。我们使用isActive方法来判断当前激活的路由是否与菜单项或侧边导航栏的路由匹配，并据此添加active类名来高亮显示当前激活的菜单项或侧边导航栏。