如何使用Vue路由器高效地渲染不同的导航栏？

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

Vue.use(VueRouter);

const router = new VueRouter({
  // 路由配置信息
});

new Vue({
  router,
  // ...
}).$mount('#app');

<template>
  <div>
    <router-link to="/home">首页</router-link>
    <router-link to="/about">关于</router-link>
    <router-link to="/contact">联系我们</router-link>
  </div>
</template>

<script>
export default {
  // 组件逻辑
}
</script>

const routes = [
  { path: '/home', component: HomeComponent },
  { path: '/about', component: AboutComponent },
  { path: '/contact', component: ContactComponent },
];

const router = new VueRouter({
  routes
});

<template>
  <div>
    <app-navbar></app-navbar>
    <router-view></router-view>
  </div>
</template>

<script>
import NavbarComponent from './components/NavbarComponent.vue';

export default {
  components: {
    'app-navbar': NavbarComponent
  }
}
</script>