【山东大学创新实训】VCRS-前端设计与开发（4）

前面已经完成了对card和input组件的自定义，在vuetify组件库的基础上增加了插槽和样式。接下来的工作就是完成侧边栏的实现、美化，以及实现路由的设置。

 侧边栏的实现

侧边栏链接元素的实现

<template>
  <component :is="tag" v-bind="$attrs" class="nav-item" tag="li">
    <a class="nav-link">
      <slot>
        <i></i>

        <p>{{ link.name }}</p>
      </slot>
    </a>
  </component>
</template>

•  component标签是一个动态组件，根据tag属性的值来决定渲染何种类型的组件，通常是router-link
• v-bind="$attrs"用于传递组件的所有属性到内部的 component 组件，这样可以让父组件传递的属性在内部组件中生效
• class="nav-item"添加了一个 CSS 类，用于样式控制
• <a class="nav-link">创建了一个具有 nav-link 类的 <a> 元素，用于链接到其他页面。

这个组件可以根据传入的属性渲染不同类型的链接元素，包括设置链接的名称、路径、图标，并具有一些基本的样式和行为控制。

侧边栏的设计与实现

<template>
  <div class="sidebar" :data="backgroundColor">
    <div class="sidebar-wrapper text-left">
      <div class="logo">
        <a href="javascript:void(0)" class="simple-text logo-mini" style="width: 57px;">
          {{ abv }}
        </a>

        <a
          href="javascript:void(0)"
          class="simple-text logo-normal"
          :class="$rtl.isRTL ? '' : 'text-left'"
        >
          {{ title }}
        </a>
      </div>
      <ul class="nav">
        <slot>
          <sidebar-link> </sidebar-link>
        </slot>
      </ul>
    </div>
  </div>
</template>

在sideBar组件中将sidebar-link嵌入，保证在侧边栏中使用的链接是上面实现的sidebar-link。同时在侧边栏的上方添加了abv和title。做了一部分美化。

props: {
    abv: {
      type: String,
      default: "VCRS",
    },
    title: {
      type: String,
      default: "知识库可视化",
    },
    backgroundColor: {
      type: String,
      default: "green",
    },
    sidebarLinks: {
      type: Array,
      default: () => [],
    },
  },

在layout文件夹下创建dashboardLayout.vue作为项目界面的布局。在布局中将sidebar和sidebarLink导入并将sidebar固定在布局的左侧，作为项目的侧边栏提供切换界面的功能。

<side-bar :background-color="backgroundColor">

      <sidebar-link to="/dashboard">
        <i class="tim-icons icon-chart-pie-36"></i>

        <template v-if="!isRTL">
          <p>总览</p>
        </template>
      </sidebar-link>

      <sidebar-link to="/entities">
        <i class="tim-icons icon-atom"></i>

        <template v-if="!isRTL">
          <p>概念词条</p>
        </template>
      </sidebar-link>

      <sidebar-link to="/kg">
        <i class="tim-icons icon-pin"></i>

        <template v-if="!isRTL">
          <p>知识图谱</p>
        </template>
      </sidebar-link>

      <sidebar-link to="/circle">
        <i class="tim-icons icon-bell-55"></i>

        <template v-if="!isRTL">
          <p>环形概念关系图</p>
        </template>

      </sidebar-link>

      <sidebar-link to="/tree">
        <i class="tim-icons icon-single-02"></i>

        <template v-if="!isRTL">
          <p>可视化目录树</p>
        </template>

      </sidebar-link>

      <sidebar-link to="/wordcloud">
        <i class="tim-icons icon-puzzle-10"></i>

        <template v-if="!isRTL">
          <p>大数据词云</p>
        </template>
      </sidebar-link>

      <sidebar-link to="/knowledge">
        <i class="tim-icons icon-atom"></i>

        <template v-if="!isRTL">
          <p>知识学习</p>
        </template>

      </sidebar-link>

      <sidebar-link to="/book">
        <i class="tim-icons icon-chart-pie-36"></i>

        <template v-if="!isRTL">
          <p>课本展示</p>
        </template>
      </sidebar-link>
    </side-bar>

在此基础上对样式，颜色，形状进行美化，完成侧边栏的实现。 

完成之后的效果图如下

路由的实现

项目使用"vue-router": "3.0.3"进行路由的实现。安装vue-router完成后，创建router.js。

添加以下路由信息，并在dashboardLayout同目录下，创建dashboardContent文件，用于渲染根据路由指向的组件。将dashboardContent嵌入dashboardLayout使当我通过侧边栏点击不同目录跳转到不同界面时，只重新渲染界面的中间展示部分，而不需要重新加载整个界面。

router.js

import DashboardLayout from "@/pages/Layout/DashboardLayout.vue";
import Knowledge from "@/pages/Knowledge.vue";
import Dashboard from "@/pages/Dashboard.vue";
import Concept from "@/pages/Concept.vue";
import Maps from "@/pages/Maps.vue";
import Circle from "@/pages/Circle.vue";
import Tree from "@/pages/Tree.vue";
import WordCloud from "@/pages/WordCloud.vue";
import Book from "@/pages/Book.vue"


const routes = [
  {
    path: "/",
    component: DashboardLayout,
    redirect: "dashboard",
    children: [
      {
        path: "dashboard",
        name: "总览",
        component: Dashboard,
      },
      {
        path: "entities",
        name: "概念词条",
        component: Concept,
      },
      {
        path: "kg",
        name: "知识图谱",
        component: Maps,
      },
      {
        path: "circle",
        name: "环形概念关系图",
        component: Circle,
      },
      {
        path: "tree",
        name: "可视化目录树",
        component: Tree,
      },
      {
        path: "wordcloud",
        name: "大数据词云",
        component: WordCloud,
      },
      {
        path: "knowledge",
        name: "知识学习",
        component: Knowledge,
        props: true,
      },
      {
        path: "book",
        name: "课本展示",
        component: Book,
      },
    ],
  },
];

export default routes;

DashBoardContent.vue

<template>
  <transition name="fade" mode="out-in">
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
  </transition>
</template>
<script></script>
<style></style>

将DashBoardContent嵌入DashboardLayout 

<div class="dashboard-content-wrapper">
          <dashboard-content @click.native="toggleSidebar"></dashboard-content>
        </div>

现在完成了侧边栏和路由的实现，可以通过点击侧边栏上的目录，跳转到不同的路由，渲染不同的组件。同时不会影响界面中除展示组件部分的其他内容。