?一、給注銷按鈕添加點擊跳轉至登錄頁

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>

?