router-link实现导航栏

要使用 router-link 实现导航栏，你需要先在 Vue 项目中安装并配置好 Vue Router。

1. 首先，在你的 Vue 项目中安装 Vue Router：

npm install vue-router

2. 在你的 main.js 文件（或者是你的入口文件）中引入 Vue Router 并配置路由：

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

Vue.use(VueRouter);

const routes = [
  { path: '/', component: Home }, // 定义首页的路由
  { path: '/about', component: About }, // 定义关于页面的路由
 // 其他页面的路由...
];

const router = new VueRouter({
  mode: 'history',
  routes,
});

new Vue({
  router,
  render: (h) => h(App),
}).$mount('#app');

3. 在你的导航栏组件中使用 router-link：

<template>
  <div>
    <router-link to="/">首页</router-link> <!-- 点击跳转到首页 -->
    <router-link to="/about">关于</router-link> <!-- 点击跳转到关于页面 -->
    <!-- 其他导航链接... -->
  </div>
</template>

在上面的代码中，使用 `<router-link>` 组件来创建导航链接。`to` 属性指定导航链接的目标路径，即路由的 `path`。

这样就可以通过点击导航链接来实现页面之间的跳转了。记得在 App.vue 中使用 `<router-view>` 组件来渲染当前路由所匹配的组件内容。

希望能帮到你！如有更多问题，请继续提问。