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

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

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

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

https://element-plus.org/zh-CN/component/menu.html#菜单-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的特点和使用方式,对于有后端基础的朋友,如果有问题请继续研究官方文档或等之后的内容

相关推荐
江城开朗的豌豆9 分钟前
React 性能优化必杀技:让你的应用飞起来!
前端·javascript·react.js
IT_陈寒12 分钟前
Vue 3.4 性能飞跃:5个Composition API优化技巧让我的应用提速40%
前端·人工智能·后端
凯子坚持 c14 分钟前
当Python遇见高德:基于PyQt与JS API构建桌面三维地形图应用实战
javascript·python·pyqt·高德地图
Zzz_睡不醒25 分钟前
JS(正则表达式)
javascript·正则表达式·c#
Bruce_Liuxiaowei28 分钟前
基于BeEF的XSS钓鱼攻击与浏览器劫持实验
前端·网络安全·ctf·xss
yinuo31 分钟前
解决微信小程序真机TextDecoder流式解析失败指南
前端
码了三年又三年1 小时前
【方舟UI框架】Navigation
前端·arkui
@HNUSTer1 小时前
基于 HTML、CSS 和 JavaScript 的智能图像虚化系统
开发语言·前端·javascript·css·html
三思而后行,慎承诺1 小时前
requestIdleCallback 和 MessageChannel
javascript·reactjs
OEC小胖胖1 小时前
React学习之路永无止境:下一步,去向何方?
前端·javascript·学习·react.js·前端框架·react·web