Vue的一个大实例+路由

一、理解路由

按照我的理解的话，路由就是点击一个按钮以后，也可能是链接，实现页面的跳转，但是没有生成新的页面，在原本页面里面的某个地方，进行改变。那这里就说一下他的一个用法吧。结合我今天要讲的实例，首先对他进行配置。我用的编译器是vscode,用IDEA的同学也可以大致的看一下，其实差不太多。在view/index.ts文件中进行配置，这两个都是自己生成的，这里是代码。

import{createRouter,createWebHistory}from 'vue-router'
const router=createRouter({
    history:createWebHistory(),
    routes:[
        {name:"home",path:"/",component:()=>import("../views/HomePage.vue")},
        {name:"test",path:"/test",component:()=>import("../views/TestPage.vue")},
        {name:"list",path:"/list",component:()=>import("../views/listPage.vue")},
        {name:"total",path:"/total",component:()=>import("../views/totalPage.vue")}
    ]
})
export default router;

 接下来根据自己的实际情况进行编写。

 写好了这一部分以后，我们在main.ts文件之中进行导入

 导入好之后，ok,进入主题。我们通过自己的实际情况，确定路由的页面的位置，比如说下图，我想要让他放在整个页面的19列，那就这样设置即可，一定要用到router-view。

 确定好位置之后，你肯定有一个疑问，怎么实现呢。我肯定要点击他，才能够实现，对吧。那么这里就需要用到router-link了。如下： 

 其实这个就相当于一个链接标签a,你需要在后面消除他原本的属性。OK，这一部分就讲到这里，如有不足之处，还望指正！

二、实例代码

这里给大家看一下这个实例的一个效果。看起来比较粗糙 。主要就是用的是Element组件。这里就不多说了，有需要的宝子看代码吧！

<template>
  <el-menu
    :default-active="activeIndex"
    class="el-menu-demo"
    mode="horizontal"
    :ellipsis="false"
    @select="handleSelect"
  >
    <el-menu-item index="0">创新工作室管理系统</el-menu-item>
    <div class="flex-grow" />
    <!-- 设定一个图标 -->
    <!-- <el-menu-item index="1">Processing Center</el-menu-item> -->
    <el-sub-menu index="2">
      <template #title><el-icon><UserFilled /></el-icon>Admin</template>
      <el-menu-item index="2-1">登录</el-menu-item>
      <el-menu-item index="2-2">注册</el-menu-item>
    </el-sub-menu>
  </el-menu>
  <el-row class="tac">
    <el-col :span="5">
      <h5 class="mb-2">
        首页</h5>
      <el-menu
        default-active="2"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
      >
        <el-sub-menu index="1">
          <template #title>
            <el-icon><Menu /></el-icon>            
            <span> 项目管理</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="1-1"><el-icon><Grid /></el-icon>
              <router-link to="/list" class="link">项目列表</router-link> 
            </el-menu-item>
            <el-menu-item index="1-2"><el-icon><HelpFilled /></el-icon>
              <router-link to="/total" class="link">项目统计</router-link> 
              </el-menu-item>
            <el-menu-item index="1-3"><el-icon><Promotion /></el-icon>
              <router-link to="/test" class="link">项目评审</router-link>
              </el-menu-item>
          </el-menu-item-group>
        </el-sub-menu>
        <el-sub-menu index="2">
          <template #title>
            <el-icon><EditPen /></el-icon>           
            <span> 团队管理</span>
          </template>
          <el-menu-item-group>
          </el-menu-item-group>
        </el-sub-menu>
        <el-sub-menu index="3">
          <template #title>
            <el-icon><Memo /></el-icon>
            <span> 资源管理</span>
          </template>
          <el-menu-item-group>
          </el-menu-item-group>
        </el-sub-menu>
        <el-sub-menu index="4">
          <template #title>
            <el-icon><Medal /></el-icon>            
            <span> 活动管理</span>
          </template>
          <el-menu-item-group>
          </el-menu-item-group>
        </el-sub-menu>
      </el-menu>
    </el-col>
    <el-col :span="19">
      <router-view></router-view>
    </el-col>
  </el-row>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const activeIndex = ref('1')
const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
</script>

<style>
.flex-grow {
  flex-grow: 1;
}
.link{
  display: inline-block;
  color: inherit;
  text-decoration: none;
}
a {
  text-decoration: none;
}

</style>