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

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

在之前的学习中我们知道我们可以用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>

之前

之后

我们在上面的内容中,我们给每个页面制定了url,不会出现之前点击导航栏的内容但是url不变的情况,这就是基本的路由利用

至此,前端vue框架的内容就暂时告一段落,但是并没有结束,因为涉及到后端的内容,我觉得了解后端学习后可以更好的了解路由以及vue的特点和使用方式,对于有后端基础的朋友,如果有问题请继续研究官方文档或等之后的内容

http://www.lryc.cn/news/586714.html

相关文章:

  • 开发语言中关于面向对象和面向过程的笔记
  • 【Qt开发】Qt的背景介绍(一)
  • docker容器高级管理-dockerfile创建镜像
  • RabbitMQ面试精讲 Day 2:RabbitMQ工作模型与消息流转
  • Netty主要组件和服务器启动源码分析
  • EWSGAN:自动搜索高性能的GAN生成器架构
  • Kotlin 类和对象
  • JS红宝书pdf完整版
  • HarmonyOS组件/模板集成创新活动-开发者工具箱
  • 2025.7.13总结
  • Nature子刊 |HERGAST:揭示超大规模空间转录组数据中的精细空间结构并放大基因表达信号
  • 直流/直流电源模块:无干扰布线,避免电磁干扰的技术方案
  • C++高级编程,类模版成员函数类外实现
  • 第三章-提示词-探秘大语言基础模型:认知、分类与前沿洞察(9/36)
  • 《Linux篇》自动化构建-make/Makefile
  • 咪咕盒子Mgv3200_mgv3201九联UNT403G_UNT413G烽火HG680-GC通刷优盘强刷包及TTL线刷烧录救砖包 当贝纯净版固件
  • 基于SpringBoot3集成Kafka集群
  • CentOS 7 升级系统内核级库 glibc 2.40 完整教程
  • docker运行redis指定配置+jdk17安装在centos7
  • C#单例模式管理全局变量
  • 【Linux 学习指南】网络基础概念(一):从协议到分层,看透计算机通信的底层逻辑
  • 【源力觉醒 创作者计划】文心开源大模型ERNIE-4.5私有化部署保姆级教程与多功能界面窗口部署
  • 文心一言大模型4.5系列开源测评
  • 开源链动2+1模式、AI智能名片与S2B2C商城小程序在私域运营中的协同创新研究
  • 笔记-极客-DDD实战-基于DDD的微服务拆分与设计
  • mysql复合条件匹配的查询优化
  • jeepay开源项目开发中金支付如何像其他支付渠道对接那样简单集成,集成服务商模式,极简集成工具。
  • (dp、贪心)洛谷 P8179 Tyres 题解
  • 012_PDF处理与文档分析
  • hash表的模拟--开放定址法