添加点击跳转页面,优化登录和注册页路由

 一、给注销按钮添加点击跳转至登录页

1、在路由中添加登录页路由

 2、自定义登录页面

3、在app.vue页面找到下拉框组件,添加点击事件

 

 

4、使用vue-router中的useRoute和useRouter 

 

 点击后可以跳转,但是还存在问题,路径这里如果我们需要更改登录路径时,两个都要修改

可以在路由中使用名字

 

在页面跳转时使用姓名这个属性的值进行跳转

 

 5、代码App.vue

<template><div class="common-layout"><el-container><el-header><div><img src="/logg.jpg" class="logo" /></div><div><el-icon><User /></el-icon><el-dropdown @command="handleCommand"><span class="el-dropdown-link">李四<el-icon class="el-icon--right"><arrow-down /></el-icon></span><template #dropdown><el-dropdown-menu><el-dropdown-item command="a">Action 1</el-dropdown-item><el-dropdown-item command="b">Action 2</el-dropdown-item><el-dropdown-item command="c">Action 3</el-dropdown-item><el-dropdown-item divided command="logout">注销</el-dropdown-item></el-dropdown-menu></template></el-dropdown></div></el-header><el-container><el-aside width="200px"><Menu></Menu></el-aside><el-main><RouterView></RouterView></el-main></el-container></el-container></div></template>
<script setup lang="ts">
import Menu from '@/components/Menu.vue';
import { useRoute,useRouter } from 'vue-router';// 带r    负责页面跳转
const route = useRoute();
// 不带r  获取当前页面相关信息(路径,参数)
const router = useRouter()const handleCommand = (command: any) => {if (command == "logout"){router.push({name:"login",query:{id:123}})}
}</script><style>
.logo {height: 25px;
}
.el-header {background-color: #004a70;display: flex;justify-content: space-between;align-items: center;color: #ffffff;
}.el-aside {background-color: #004a70;height: calc(100vh - 70px);
}
</style>

二、 设置登录页和注册页不使用路由边框

登录页只需要中间内容区域就可以了 

 在路由中设置是否使用路由框架属性

 在App.vue页面中进行判断

代码:App.vue

<template><div v-if="$route.meta.isUseFrame == false"><RouterView></RouterView>
</div><div v-else><div class="common-layout"><el-container><el-header><div><img src="/logg.jpg" class="logo" /></div><div><el-icon><User /></el-icon><el-dropdown @command="handleCommand"><span class="el-dropdown-link">李四<el-icon class="el-icon--right"><arrow-down /></el-icon></span><template #dropdown><el-dropdown-menu><el-dropdown-item command="a">Action 1</el-dropdown-item><el-dropdown-item command="b">Action 2</el-dropdown-item><el-dropdown-item command="c">Action 3</el-dropdown-item><el-dropdown-item divided command="logout">注销</el-dropdown-item></el-dropdown-menu></template></el-dropdown></div></el-header><el-container><el-aside width="200px"><Menu></Menu></el-aside><el-main><RouterView></RouterView></el-main></el-container></el-container></div>
</div></template>
<script setup lang="ts">
import Menu from '@/components/Menu.vue';
import { useRoute,useRouter } from 'vue-router';// 带r    负责页面跳转
const route = useRoute();
// 不带r  获取当前页面相关信息(路径,参数)
const router = useRouter()const handleCommand = (command: any) => {if (command == "logout"){router.push({name:"login",query:{id:123}})}
}</script><style>
.logo {height: 25px;
}
.el-header {background-color: #004a70;display: flex;justify-content: space-between;align-items: center;color: #ffffff;
}.el-aside {background-color: #004a70;height: calc(100vh - 70px);
}
</style>

 

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

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

相关文章

Linux——公网 IP别名设置,清屏,删除别名,在linux中提供alias永久化的方法,命令历史

#### ipe - 公网 IP别名设置&#xff1a; bash alias ipecurl ipinfo.io/ip [rootserver ~]# alias ipecurl ipinfo.io/ip [rootserver ~]# ipe 113.132.176.202[rootserver ~]# #### c - 清屏&#xff0c;一般使用 ctrl l 快捷键&#xff0c;也可以将 clear 命令定义得更短&…

JavaScript 作用域 与 var、let、const关键字

目录 一、JavaScript 作用域 1、全局作用域 2、函数作用域 3、块级作用域 4、综合示例 5、总结 二、var、let、const 1、var 关键字 2、let 关键字 3、const 关键字 4、总结 5、使用场景 一、JavaScript 作用域 在JavaScript中&#xff0c;作用域是指程序中可访问…

订单到期关闭

文章目录 前言一、场景&#xff1f;二、使用步骤1.项目配置好rocketmq2.读入数据 其他方式处理订单到期关闭定时任务 前言 实习期间在做订单模块。遇到过订单到时关闭的场景。 因为我们在通过回调接收第三方订单状态的时候&#xff0c;使用了rocketmq&#xff0c;在遇到订单超…

叁[3],使用Newtonsoft.Json.dll,异常记录

开发环境 VS2022/.net6.0/WPF 1&#xff0c;异常1,反序列化数组异常。 convertError:"[{"不拉不拉***************************** 原因&#xff1a;检查是Json字符串的数组格式异常。 正常数组字符串 "result":[{"key1":"value1"…

神经网络构成、优化、常用函数+激活函数

Iris分类 数据集介绍&#xff0c;共有数据150组&#xff0c;每组包括长宽等4个输入特征&#xff0c;同时给出输入特征对应的Iris类别&#xff0c;分别用0&#xff0c;1&#xff0c;2表示。 从sklearn包datasets读入数据集。 from sklearn import darasets from pandas impor…

vulnhub-NOOB-1

确认靶机 扫描靶机发现ftp Anonymous 的A大小写都可以 查看文件 解密 登录网页 点击about us会下载一个压缩包 使用工具提取 steghide info 目标文件 //查看隐藏信息 steghide extract -sf 目标文件 //提取隐藏的文件 steghide embed -cf 隐藏信息的文件 -ef…

什么样的开放式耳机好用舒服?南卡、倍思、Oladance高人气质量绝佳产品力荐!

​开放式耳机在如今社会中已经迅速成为大家购买耳机的新趋势&#xff0c;深受喜欢听歌和热爱运动的人群欢迎。当大家谈到佩戴的稳固性时&#xff0c;开放式耳机都会收到一致好评。对于热爱运动的人士而言&#xff0c;高品质的开放式耳机无疑是理想之选。特别是在近年来的一些骑…

算法学习记录4

L2-012 关于堆的判断 def checkHeap(heap, target):if target 0:return heapif heap[target] < heap[(target - 1) // 2]:temp heap[target]heap[target] heap[(target - 1) // 2]heap[(target - 1) // 2] tempheap checkHeap(heap, (target - 1) // 2)return heapdef…

2024.7.7刷题记录

目录 一、849. Dijkstra求最短路 I - AcWing题库 二、850. Dijkstra求最短路 II - AcWing题库 根据讲解视频写的代码 一、849. Dijkstra求最短路 I - AcWing题库 N 600 MAXL 10010 # 最长边长 # 稠密图邻接矩阵 g [[MAXL] * N for _ in range(N)] dist [MAXL] * N …

图片kb太大了怎么改小?修改图片kb的方法介绍

图片kb太大了怎么改小&#xff1f;将图片的文件大小&#xff08;以KB为单位&#xff09;缩小可以带来多种优点&#xff0c;但也有一些缺点需要注意。缩小图片文件大小可以显著减少它在硬盘或其他存储设备上占用的空间&#xff0c;使你能够存储更多的图片和其他文件。而且&#…

KIVY 3D Rotating Monkey Head¶

7 Python Kivy Projects (With Full Tutorials) – Pythonista Planet KIVY 3D Rotating Monkey Head kivy 3D 旋转猴子头How to display rotating monkey example in a given layout. Issue #6688 kivy/kivy GitHub 3d 模型下载链接 P99 - Download Free 3D model by …

【Qt】QItemSelectionModel 添加选中行

1. 介绍 QItemSelectionModel 中没有直接添加选中行的方法&#xff0c;可以通过下面的方式添加。 2. 代码 //定义 QSqlTableModel* m_tableModel; QItemSelectionModel* m_selectionModel;//添加选中行, 全选 void addAllLine() {for(int i0; i<m_tableModel->rowCoun…

【AI大模型新型智算中心技术体系深度分析 2024】

文末有福利&#xff01; ChatGPT 系 列 大 模 型 的 发 布&#xff0c; 不 仅 引 爆 全 球 科 技 圈&#xff0c; 更 加 夯 实 了 人 工 智 能&#xff08;Artificial Intelligence, AI&#xff09;在未来改变人类生产生活方式、引发社会文明和竞争力代际跃迁的战略性地位。当…

mysql select count返回null

注意 mysql select count返回null 下面是百度的回答 在MySQL中&#xff0c;当SELECT COUNT(*)查询返回NULL时&#xff0c;通常意味着查询结果为空集&#xff0c;即没有记录匹配查询条件。COUNT()函数在没有匹配行的情况下返回NULL&#xff0c;而不是0。 解决方法&#xff1a…

ImportError: xxx: cannot open shared object file: No such file or directory

一类常见错误&#xff1a;编译器器无法在目录下找到共享目标文件&#xff0c; Linux(ubuntu)中共享的库目录为/usr/lib/x86_64-linux-gnu&#xff0c;gcc的编译库 在该目录下创建共享文件&#xff08;伪造、下载&#x1f91c;cp)即可 sudo ln -s libtiff.so.6 libtiff.so.5

昇思25天学习打卡营第11天|ResNet50图像分类

文章目录 昇思MindSpore应用实践基于MindSpore的ResNet50图像分类1、ResNet50 简介2、数据集预处理及可视化3、构建网络构建 Building Block构建 Bottleneck Block构建 ResNet50 网络 4、模型训练5、图像分类模型推理 Reference 昇思MindSpore应用实践 本系列文章主要用于记录…

Emacs相关

Emacs 详细介绍 Emacs&#xff0c;全称 Editor MACroS&#xff0c;是一款功能强大、历史悠久的文本编辑器。它最早由 Richard Stallman 于 1976 年开发&#xff0c;是自由软件运动的重要组成部分。Emacs 的设计理念强调可定制性和扩展性&#xff0c;使得它不仅仅是一个编辑器&…

AsyncRequestTimeoutException

在Spring MVC中&#xff0c;当一个异步请求超过配置的最大等待时间时&#xff0c;会抛出AsyncRequestTimeoutException异常。这个异常通常是由于服务器端的处理时间超过了客户端允许的等待时间&#xff0c;或者是服务器本身的异步处理时间配置过短导致的。 spring: mvc: async…

scrapy写爬虫

Scrapy是一个用于爬取网站数据并提取结构化信息的Python框架 一、Scrapy介绍 1.引擎&#xff08;Engine&#xff09; – Scrapy的引擎是控制数据流和触发事件的核心。它管理着Spider发送的请求和接收的响应&#xff0c;以及处理Spider生成的Item。引擎是Scrapy运行的驱动力。…

基于go-zero二次开发的脚本

param$2 # 字符串风格格式为&#xff1a;DemoName model_name$(echo "${param}" | awk -F _ {for(i1;i<NF;i) $itoupper(substr($i,1,1)) tolower(substr($i,2));}1 | tr -d ) # 字符串风格格式为&#xff1a;demoName struct_name$(echo "${model_name}&qu…