一、给注销按钮添加点击跳转至登录页
![](https://i-blog.csdnimg.cn/direct/9a9a4e2bd2f545fbbfe2a04995edca73.png)
1、在路由中添加登录页路由
2、自定义登录页面
![](https://i-blog.csdnimg.cn/direct/b3271e0296ac4df4b8c76a4439f61080.png)
3、在app.vue页面找到下拉框组件,添加点击事件
![](https://i-blog.csdnimg.cn/direct/50ec2b6b3d1a4615ba003378d865c020.png)
![](https://i-blog.csdnimg.cn/direct/f42e4d379fdc4768a231fe7e9b512c70.png)
![](https://i-blog.csdnimg.cn/direct/afc799a72df44ee5a46014e4c9daae27.png)
4、使用vue-router中的useRoute和useRouter
![](https://i-blog.csdnimg.cn/direct/a97a71245ed24a09bf478a0e830c57cf.png)
![](https://i-blog.csdnimg.cn/direct/d2267b37cb0144d0a53e22415d61a540.png)
点击后可以跳转,但是还存在问题,路径这里如果我们需要更改登录路径时,两个都要修改
![](https://i-blog.csdnimg.cn/direct/c2b75002991244159f1071cc545c9c3b.png)
可以在路由中使用名字
![](https://i-blog.csdnimg.cn/direct/e68127a2889847d8b51c5500ca3c4343.png)
在页面跳转时使用姓名这个属性的值进行跳转
![](https://i-blog.csdnimg.cn/direct/37b92440b2814c67b15434c73674181e.png)
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>
二、 设置登录页和注册页不使用路由边框
登录页只需要中间内容区域就可以了
![](https://i-blog.csdnimg.cn/direct/abd8b801987b4765abb24dd7e66ec14c.png)
在路由中设置是否使用路由框架属性
![](https://i-blog.csdnimg.cn/direct/0bf08772697e4ffbb69e04ae8a7147ec.png)
在App.vue页面中进行判断
![](https://i-blog.csdnimg.cn/direct/98c66f7d1c6e45eab146f4c90b8f7544.png)
代码: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>