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

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>