Vue实训---5-路由搭建

回顾之前的代码

我们在my-vue-project\src\router\index.js中的代码如下:

// 什么是路由?路由就是url地址和组件的对应关系
// 1.引入vue-router
import { createRouter, createWebHashHistory } from 'vue-router'// 2.定义路由
const routes = [{path: '/',    // 路由路径name: 'main', // 路由名称component: () => import('@/views/Main.vue') // 路由组件},
]// 创建路由实例
const router = createRouter({// 设置路由模式, hash模式history: createWebHashHistory(),routes, // 注入路由配置
})// 3.导出路由
export default router 

表示我们定义了一个url路径:'/'(即默认路径/)与Main.vue组件的对应关系,然后当项目启动后就默认进到默认路径 '/' 中,即会显示Main.vue路由。Mian.vue组件具体显示在App.vue的路由视图<router-view></router-view>标签的位置。

1.新建组件

在src/views/文件夹下新建Home.vue、Mall.vue、User.vue、Page1.vue、Page2.vue组件,组件内容如下:

<template><div>home组件(如果是其他组件的话名字修改一下)</div>
</template><script setup></script><style lang="less" scoped></style>

2.修改路由配置

my-vue-project\src\router\index.js

// 什么是路由?路由就是url地址和组件的对应关系// 1.引入vue-router
import { createRouter, createWebHashHistory } from "vue-router";// 2.定义路由
const routes = [{path: "/",name: "main",component: () => import("@/views/Main.vue"),redirect: "/home", //路由重定向children: [{path: "home",name: "home",component: () => import("@/views/Home.vue"),},{path: "user",name: "user",component: () => import("@/views/User.vue"),},{path: "mall",name: "mall",component: () => import("@/views/Mall.vue"),},{path: "page1",name: "page1",component: () => import("@/views/Page1.vue"),},{path: "page2",name: "page2",component: () => import("@/views/Page2.vue"),},],},
];// 创建路由实例
const router = createRouter({// 设置路由模式, hash模式history: createWebHashHistory(),routes, // 注入路由配置
});// 3.导出路由
export default router;

3.为Mian.vue的子路由设置路由视图

在Main.vue中的el-main标签内部添加<router-view></router-view>路由视图,表示其子路由会显示在这个位置。

-- 在地址栏输入url地址验证

默认地址页面http://localhost:5173/#/ 会重定向到 http://localhost:5173/#/home,显示

地址页面http://localhost:5173/#/user,显示:

很棒!

5.配置左侧菜单栏与路由的联动

实现点击左侧菜单栏,右侧显示菜单栏项对应的组件。(即我们上一步实现的是地址栏URL与右侧组件的一一对应,现在实现左侧菜单栏与右侧组件的对应)

在CommonAside.vue组件中,找到标签el-menu-item(一共有两个),添加点击事件@click="handleMenu(传参)"

<!-- 循环遍历菜单栏 -->

<!-- 1.没有子菜单的遍历 -->

<el-menu-item @click="handleMenu(item)" v-for="item in noChildren" :key="item.path" :index="item.path">

<!-- 循环遍历子菜单 -->
<el-menu-item @click="handleMenu(child)" v-for="child in item.children" :key="child.path" :index="child.path">
    <!-- 动态获取icon图标 -->
    <component :is="child.icon" class="icons"></component>
    <!-- 显示文字内容 -->
    <span>{{ child.label }}</span>
</el-menu-item> 

继续在script中添加代码:

// 路由

import { useRouter, useRoute } from 'vue-router';

const router = useRouter()

// handleMenu方法的实现

const handleMenu = (item) => {

    router.push(item.path)

}

router.push() 是 Vue Router 提供的一个方法,用于在单页面应用(SPA)中进行路由跳转。

这个方法会改变浏览器的历史记录,并加载对应路径的组件,而不会刷新页面。

 即CommonAside.vue修改后的完整代码为:

<template><!-- 首先最外层是Main.vue中注释的<el-aside width="200px" class="el-aside">Aside</el-aside>,我们将侧边栏改成我们自定义的组件,通过common-aside引入我们自己写的组件 --><el-aside :width="width" class="el-aside"><el-menu background-color="#545c64" text-color="#fff" :collapse="isCollapse" :collapse-transition="false"><!-- 写菜单栏的大标题————通用后台管理系统 --><h3 v-show="!isCollapse">通用后台管理系统</h3><h3 v-show="isCollapse">后台</h3><!-- 循环遍历菜单栏 --><!-- 1.没有子菜单的遍历 --><el-menu-item @click="handleMenu(item)" v-for="item in noChildren" :key="item.path" :index="item.path"><!-- <el-icon><icon-menu /></el-icon> --><!-- 动态获取icon图标 --><component :is="item.icon" class="icons"></component><!-- 显示文字内容 --><span>{{ item.label }}</span></el-menu-item><!-- 2.有子菜单的遍历 --><el-sub-menu v-for="item in hasChildren" :key="item.path" :index="item.path"><template #title><!-- 动态获取icon图标 --><component :is="item.icon" class="icons"></component><!-- 显示文字内容 --><span>{{ item.label }}</span></template><!-- 分组 --><el-menu-item-group><!-- 循环遍历子菜单 --><el-menu-item @click="handleMenu(child)" v-for="child in item.children" :key="child.path":index="child.path"><!-- 动态获取icon图标 --><component :is="child.icon" class="icons"></component><!-- 显示文字内容 --><span>{{ child.label }}</span></el-menu-item></el-menu-item-group></el-sub-menu></el-menu></el-aside>
</template><script setup>
import { ref, computed } from 'vue'
import { storeToRefs } from 'pinia';
import { useAllDateStore } from '@/stores/index';
// 获取 store 实例
const store = useAllDateStore();
// 使用 storeToRefs 解构响应式属性
const { isCollapse } = storeToRefs(store);
// 根据 isCollapse 来计算宽度
const width = computed(() => isCollapse.value ? '64px' : '200px')const list = ref([{path: '/home',name: 'home',label: '首页',icon: 'house',url: 'Home'},{path: '/mall',name: 'mall',label: '商品管理',icon: 'video-play',url: 'Mall'},{path: '/user',name: 'user',label: '用户管理',icon: 'user',url: 'User'},{path: 'other',label: '其他',icon: 'location',children: [{path: '/page1',name: 'page1',label: '页面1',icon: 'setting',url: 'Page1'},{path: '/page2',name: 'page2',label: '页面2',icon: 'setting',url: 'Page2'}]}
])
const noChildren = computed(() => list.value.filter(item => !item.children))
const hasChildren = computed(() => list.value.filter(item => item.children))// 路由
import { useRouter, useRoute } from 'vue-router';
const router = useRouter()
// handleMenu方法的实现
const handleMenu = (item) => {router.push(item.path)
}
</script><style lang="less" scoped>
.icons {width: 18px;height: 18px;margin-right: 5px;
}.el-menu {border-right: none;h3 {line-height: 48px;color: #fff;text-align: center;}
}.el-aside {height: 100%;background-color: #545c64;
}
</style>
--点击左侧菜单栏验证

点击“商品管理”:

点击“页面1”:

成功!

项目源代码:

通过百度网盘分享的文件:实现路由
链接:https://pan.baidu.com/s/1WaOLqig2MV-x-nv1M-6bMA?pwd=6666 
提取码:6666

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/478848.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【GAMES101笔记速查——Lecture 19 Cameras,Lenses and Light Fields】

本章节内容&#xff1a;相机、棱镜、光场 计算机图形学的两种成像方法&#xff1a; 1.合成方法&#xff1a;光栅化、光线追踪&#xff08;展示出现实没有的东西&#xff09; 2.捕捉方法&#xff1a;相机&#xff08;捕捉现实已有的东西&#xff09; 目录 1 相机 1.1 针孔相…

MacOS系统上Jmeter 录制脚本遇到的证书坑位

一、JMeter介绍与安装 1&#xff0c;下载及安装 jmeter官网地址 二、录制百度链接https请求时&#xff0c;需要导入jmeter相关证书到macos系统的更目录中. 导入方式&#xff0c;直接拖入mac的系统中&#xff0c;始终新人就可以&#xff1b; 三、jmeter 创建相关的录制组件…

软件团队的共担责任

问责制被认为是个人与其社会系统之间的纽带&#xff0c;它创造了一种将个人与其行为和绩效联系起来的身份关系。在入门系列的第一篇文章《超越工具和流程&#xff1a;成功软件开发团队的策略》中&#xff0c;我们介绍了问责制的概念&#xff0c;并提出了以下定义&#xff1a; …

【Python爬虫实战】深入解析 Scrapy:从阻塞与非阻塞到高效爬取的实战指南

&#x1f308;个人主页&#xff1a;易辰君-CSDN博客 &#x1f525; 系列专栏&#xff1a;https://blog.csdn.net/2401_86688088/category_12797772.html ​ 目录 前言 一、阻塞和非阻塞 &#xff08;一&#xff09;阻塞 &#xff08;二&#xff09;非阻塞 二、Scrapy的工作…

【Python数据分析五十个小案例】电影评分分析:使用Pandas分析电影评分数据,探索评分的分布、热门电影、用户偏好

博客主页&#xff1a;小馒头学python 本文专栏: Python数据分析五十个小案例 专栏简介&#xff1a;分享五十个Python数据分析小案例 在现代电影行业中&#xff0c;数据分析已经成为提升用户体验和电影推荐的关键工具。通过分析电影评分数据&#xff0c;我们可以揭示出用户的…

第八篇:CamX RawHdr Feature Enable

CamX RawHdr Feature Enable RawHdr feature介绍: 试用于拍照场景,输入3张Raw,输出一张Raw。 对应的pipeline: camxSWMFMergeRaw.xml (usecases: UsecaseZSL) featureGraph: RTRawHDRBayer2YUVJPEG ​ RT -> RawHdr -> Bayer2Yuv -> JPEG RTRawHDRBayer2YUVJPE…

Python毕业设计选题:基于django+vue的期货交易模拟系统的设计与实现

开发语言&#xff1a;Python框架&#xff1a;djangoPython版本&#xff1a;python3.7.7数据库&#xff1a;mysql 5.7数据库工具&#xff1a;Navicat11开发软件&#xff1a;PyCharm 系统展示 系统首页 期货信息 个人中心 管理员登录界面 管理员功能界面 用户管理 期货公司管理…

文件内容扫描工具

简介 文件扫描助手是一款基于Vite Vue 3 Electron技术栈开发的跨平台桌面应用程序。它提供了强大的文件内容搜索功能&#xff0c;支持Word、Excel、PDF、PPT等常见办公文档格式。用户可以通过关键词快速定位到包含特定内容的文件&#xff0c;极大地提高了文件管理和查找效率…

数据结构--AVL树(平衡二叉树)

✅博客主页:爆打维c-CSDN博客​​​​​​ &#x1f43e; &#x1f539;分享c、c知识及代码 &#x1f43e; &#x1f539;Gitee代码仓库 五彩斑斓黑1 (colorful-black-1) - Gitee.com 一、AVL树是什么&#xff1f;&#xff08;含义、性质&#xff09; 1.AVL树的概念 AVL树是最…

【算法】连通块问题(C/C++)

目录 连通块问题 解决思路 步骤&#xff1a; 初始化&#xff1a; DFS函数&#xff1a; 复杂度分析 代码实现&#xff08;C&#xff09; 题目链接&#xff1a;2060. 奶牛选美 - AcWing题库 解题思路&#xff1a; AC代码&#xff1a; 题目链接&#xff1a;687. 扫雷 -…

24.11.26 Mybatis2

resultMap 中的标签和属性 如果是主键列 一般用id标签对应 propertyjava对象的属性 column 数据库中的列( javaType实体类数据类型 jdbcType数据库列的数据类型 ) 不需要配置 <id property"empno" column"empno" />如果是普通列 一般用result对…

Redis设计与实现第14章 -- 服务器 总结(命令执行器 serverCron函数 初始化)

14.1 命令请求的执行过程 一个命令请求从发送到获得回复的过程中&#xff0c;客户端和服务器都需要完成一系列操作。 14.1.1 发送命令请求 当用户在客户端中输入一个命令请求的时候&#xff0c;客户端会把这个命令请求转换为协议格式&#xff0c;然后通过连接到服务器的套接字…

ArcGIS pro中的回归分析浅析(加更)关于广义线性回归工具的补充内容

在回归分析浅析中篇的文章中&#xff0c; 有人问了一个问题&#xff1a; 案例里的calls数据貌似离散&#xff0c;更符合泊松模型&#xff0c;为啥不采用泊松而采用高斯呢&#xff1f; 确实&#xff0c;在中篇中写道&#xff1a; 在这个例子中我们为了更好地解释变量&#x…

【面试题】2025年百度校招Java后端面试题

文章目录 前言一、网络IO1、服务器处理并发请求有哪几种方式&#xff1f;2、说一下select&#xff0c;poll&#xff0c;epoll的区别&#xff1f;3、Java 有一种现代的处理方式&#xff0c;属于异步I/O&#xff0c;是什么&#xff1f;redis&#xff0c;nginx&#xff0c;netty 是…

【Zookeeper 和 Kafka】为什么 Zookeeper 不用域名?

人不走空 &#x1f308;个人主页&#xff1a;人不走空 &#x1f496;系列专栏&#xff1a;算法专题 ⏰诗词歌赋&#xff1a;斯是陋室&#xff0c;惟吾德馨 目录 &#x1f308;个人主页&#xff1a;人不走空 &#x1f496;系列专栏&#xff1a;算法专题 ⏰诗词歌…

RiceChem——用于评估大语言模型在教育领域自动长答卷评分 (ALAG) 的数据集

摘要 论文地址:https://arxiv.org/abs/2404.14316 源码地址&#xff1a;https://github.com/luffycodes/automated-long-answer-grading 迄今为止&#xff0c;教育领域的自然语言处理&#xff08;NLP&#xff09;主要集中在简答题评分和自由文本作文评分方面。然而&#xff0c…

Java ArrayList 与顺序表:在编程海洋中把握数据结构的关键之锚

我的个人主页 我的专栏&#xff1a;Java-数据结构&#xff0c;希望能帮助到大家&#xff01;&#xff01;&#xff01;点赞❤ 收藏❤ 前言&#xff1a;在 Java编程的广袤世界里&#xff0c;数据结构犹如精巧的建筑蓝图&#xff0c;决定着程序在数据处理与存储时的效率、灵活性以…

【04】Selenium+Python 手动添加Cookie免登录(实例)

一、什么是Cookie&#xff1f; Cookie 是一种由服务器创建并保存在用户浏览器中的小型数据文件。它用于存储用户的相关信息&#xff0c;以便在后续访问同一网站时可以快速检索这些信息。Cookie 主要用于以下几个方面&#xff1a; 1.状态管理&#xff1a; Cookie 可以保存用户…

GitLab|应用部署

创建docker-compose.yaml文件 输入docker-compose配置 version: 3.8 services:gitlab:image: gitlab/gitlab-ce:15.11.2-ce.0restart: alwayscontainer_name: gitlab-ceprivileged: truehostname: 192.168.44.235environment:TZ: Asia/ShanghaiGITLAB_OMNIBUS_CONFIG: |exter…

【PX4_Autopolite飞控源码】中飞控板初始化过程中的引脚IO控制(拉低/拉高)

先选择自己飞控板支持的硬件平台 打开对应的路径我的是Desktop/px4/PX4-Autopilot/boards/zhty/nora 找到board_config.h文件&#xff0c;打开nora后再往下去找Desktop/px4/PX4-Autopilot/boards/zhty/nora/src/borad_config.h 打开后可以看到有很多GPIO引脚的定义&#xff0c…