vue3 导航栏数据router

Vue3 中的导航栏数据可以通过 Vue Router 实现。在 Vue Router 中，可以通过定义路由来设置导航栏的数据。

首先需要安装 Vue Router：

npm install vue-router

然后在 Vue 应用程序中引入并使用 Vue Router：

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/about',
      name: 'About',
      component: About
    }
  ]
})

export default router

在上述代码中，定义了两个路由 `/` 和 `/about`，分别对应 `Home` 和 `About` 组件。这样就可以在导航栏中显示对应的菜单项了。

在组件中，可以通过 `$route` 对象获取当前路由的信息，例如：

export default {
  computed: {
    isActive() {
      return this.$route.name === 'Home'
    }
  }
}

在这个例子中，`isActive` 计算属性会根据当前路由是否是 `Home` 路由来判断是否应该高亮显示导航菜单项。

需要注意的是，在使用 Vue Router 时，需要在应用程序的根组件中添加 `<router-view>` 元素，用于渲染当前路由对应的组件。

<template>
  <div>
    <nav>
      <router-link to="/">Home</router-link>
      <router-link to="/about">About</router-link>
    </nav>
    <router-view></router-view>
  </div>
</template>