如何使用Vue根据vue-router生成菜单导航栏简单实现

1. 安装vue-router

npm install vue-router --save

2. 创建router.js文件并配置路由

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import About from '@/components/About'
import Contact from '@/components/Contact'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/about',
      name: 'About',
      component: About
    },
    {
      path: '/contact',
      name: 'Contact',
      component: Contact
    }
  ]
})

3. 在App.vue中引入router并设置router-view组件

<template>
  <div id="app">
    <nav>
      <ul>
        <li><router-link to="/">Home</router-link></li>
        <li><router-link to="/about">About</router-link></li>
        <li><router-link to="/contact">Contact</router-link></li>
      </ul>
    </nav>
    <router-view/>
  </div>
</template>

<script>
import router from './router'

export default {
  name: 'App',
  router
}
</script>

4. 在router.js中添加meta属性

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home,
      meta: { title: 'Home' }
    },
    {
      path: '/about',
      name: 'About',
      component: About,
      meta: { title: 'About' }
    },
    {
      path: '/contact',
      name: 'Contact',
      component: Contact,
      meta: { title: 'Contact' }
    }
  ]
})

5. 在App.vue中动态生成菜单导航栏

<template>
  <div id="app">
    <nav>
      <ul>
        <li v-for="route in $router.options.routes">
          <router-link :to="route.path">{{route.meta.title}}</router-link>
        </li>
      </ul>
    </nav>
    <router-view/>
  </div>
</template>

这样就可以根据vue-router生成菜单导航栏了。当需要增加新的页面时，只需要在router.js中添加路由和meta属性，菜单导航栏会自动更新。