一、vue-router是什么?

官网地址：router.vuejs.org/zh/

Vue Router 是 Vue.js (opens new window)官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。功能包含：

嵌套的路由/视图表
模块化的、基于组件的路由配置
路由参数、查询、通配符
基于 Vue.js 过渡系统的视图过渡效果
细粒度的导航控制
带有自动激活的 CSS class 的链接
HTML5 历史模式或 hash 模式，在 IE9 中自动降级
自定义的滚动条行为

二、实际开发过程

在之前我们已经在框架里使用了ant-design-vue，我们基于这个，搭建个后台管理系统，通过以下几个步骤，我们就可以在项目中使用vue-router。

1. 编写layout页面

layout页面是我们布局页，除了登录页和404页面，其余的页面都是基于它的再次开发，是我们的公共页面。在view文件中新建layout目录，在目录里新建index.vue的文件

<a-layout id="layout">
    <a-layout-sider id="layout_sider">Sider</a-layout-sider>
    <a-layout>
      <a-layout-header>Header</a-layout-header>
      <a-layout-content>
        <router-view></router-view>
      </a-layout-content>
      <a-layout-footer>Footer</a-layout-footer>
    </a-layout>
  </a-layout>

写完这个index.vue文件后，我们就要去修改main.ts文件

2. 在页面如何使用ant-design-vue的layout组件

找到main.ts文件这里我们需要做两件事，导入和使用，至于为什么导入是因为我们在使用的时候用的是按需引用，用的到再引用，避免了我们项目的臃肿。

导入和使用方式是：

import { Button, Layout } from 'ant-design-vue'
const plugins = [Button, Layout]
plugins.forEach(p => app.use(p))

通过以上操作，我们就可以在页面里使用layout这个组件了。但是我们现在为止，还是不能在页面里看到。我们的router还没有配置。

3. 配置router文件下的index.ts文件

首先要引入我们的layout文件。代码如下：

import LayOut from '../views/layout/index.vue'

下边其实可以写route参数了，在这有一个事要说，route的配置其实是分静态和动态，动态其实和权限有关系，这个我们在后边也会使用到.

{
    path: '/home',
    name: '/home',
    component: LayOut,
    redirect: '/home/index',
    children: [
      {
        path: 'index',
        component: () => import('../views/Home.vue'),
        meta: {
          title: '首页',
          icon: 'snippets'
        }
      },
      {
        path: 'about',
        component: () => import('../views/About.vue'),
        meta: {
          title: '关于',
          icon: 'snippets'
        }
      }
    ]
  }

在route里，我们把每个页面都是一个对象，这个对象可以嵌套它的子对象，就是子路由，对象大致的参数都有path，name,component,redirect，children，这些是我们经常用到的参数。大家可以翻阅资料了解它的配置。

配置好以上内容后，我们就可以通过router访问到一个页面了。例如：http://localhost:8080/home/index

你能看到这个，就说明配置成功了。如果有误，可以查看我码云上的代码库，互相对比。有什么问题也欢迎提出。

三、如何在页面上自动显示route的link

做到这个需要做到两点，第一是使用Menu组件，一个是使用route属性。

Menu组件是使用。

在main.ts中导入Menu组件

import { Button, Layout, Menu, Icon } from 'ant-design-vue'
const plugins = [Button, Layout, Menu, Icon]

然后在页面中使用，具体代码，可以自行在ant-design-vue中查找。

route的使用

其实剩下的就很简单了，就是循环遍历，我们拿到route的所有参数，根据它的参数，做遍历，将name变成名称，path变为路径。

<a-menu mode="inline" theme="dark" :inline-collapsed="collapsed" v-model:openKeys="openKeys" v-model:selectedKeys="selectedKeys">
      <a-sub-menu v-for="(items, indexs) in $router.options.routes" :key="indexs">
        <template #title>
          <span>
            <MailOutlined />
            <span>{{ items.name }}</span>
          </span>
        </template>
        <a-menu-item v-for="(item, index) in items.children" :key="indexs + index">
          <router-link :to="items.path + '/' + item.path">
            {{ item.meta.title }}
          </router-link>
        </a-menu-item>
      </a-sub-menu>
    </a-menu>

那么现在，我们其实就可以看到我们的页面上有我们的导航了。

看到以上代码，就说明我们的配置是成功了，代码库在：gitee.com/niuny/vue3/… 可以做比对。

未完待续...

搭建管理后台-2