vue动态路由导航菜单

可以通过使用 Vue Router 和动态路由来实现动态路由导航菜单。

首先，在 Vue Router 中定义动态路由。例如，我们可以定义一个名为 `Category` 的路由，并将其作为一个动态路由：

const router = new VueRouter({
  routes: [
    {
      path: '/category/:id',
      name: 'Category',
      component: Category
    }
  ]
})

接下来，在组件中使用 `this.$router.push()` 方法来动态导航到路由。例如，我们可以在导航菜单组件中使用 `v-for` 循环来创建菜单项，并在点击菜单项时使用 `this.$router.push()` 来动态导航到相应的路由：

<template>
  <div>
    <ul>
      <li v-for="category in categories" :key="category.id" @click="navigate(category.id)">
        {{ category.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      categories: [
        { id: 1, name: 'Category 1' },
        { id: 2, name: 'Category 2' },
        { id: 3, name: 'Category 3' }
      ]
    }
  },
  methods: {
    navigate(id) {
      this.$router.push({ name: 'Category', params: { id: id } })
    }
  }
}
</script>

在上面的示例中，我们使用 `v-for` 循环创建菜单项，并在点击菜单项时调用 `navigate()` 方法来动态导航到相应的路由。在 `navigate()` 方法中，我们使用 `this.$router.push()` 方法来动态导航到名为 `Category` 的路由，并将路由参数 `id` 设置为当前菜单项的 `id` 值。

最后，在 App.vue 中包含导航菜单组件和路由出口：

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

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

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

以上就是实现 Vue 动态路由导航菜单的基本步骤。