当前位置：首页 > news >正文

前端进阶之路-从传统前端到VUE-JS（第五期-路由应用）

news 2025/7/14 7:47:38

在之前的学习中我们知道我们可以用router文件夹里的index.ts来调整路由那么我们本期内容便是如此，通过路由调整来实现网页跳转

（路由真的是一个很抽象的东西，至少在我学习的过程中觉得很麻烦的，所以，如果长时间理解不了就直接看其它的内容就行，慢慢的就了解路由了）

在此之前，我们还需要通过看Element plus官方文档来了解怎么实现点击对应按钮来实现相应动作

https://element-plus.org/zh-CN/component/menu.html#%E8%8F%9C%E5%8D%95-api

由此，我们再来修改一下（NavigationBar.vue文件中修改）

<template><el-menu:default-active="activeIndex"class="el-menu-demo"mode="horizontal"@select="handleSelect"><el-menu-item index="1">你好</el-menu-item><el-sub-menu index="2"><template #title>工作区</template><el-menu-item index="2-1">item one</el-menu-item><el-menu-item index="2-2">item two</el-menu-item><el-menu-item index="2-3" @click="MenuClick">测试</el-menu-item><el-sub-menu index="2-4"><template #title>测试1</template><el-menu-item index="2-4-1">测试2</el-menu-item><el-menu-item index="2-4-2">item two</el-menu-item><el-menu-item index="2-4-3">item three</el-menu-item></el-sub-menu></el-sub-menu><el-menu-item index="3" disabled>Info</el-menu-item><el-menu-item index="4">Orders</el-menu-item></el-menu><div class="h-6" /></template><style scoped></style><script setup lang="ts">import { ref } from "vue";import { useRouter } from "vue-router";interface MenuItemRegistered {index: string;title: string;}const activeIndex = ref("1");const router = useRouter();const handleSelect = (key: string) => {router.push({path: key,});};const MenuClick = (item: MenuItemRegistered) => {console.log(item);};</script>

之前