{"id":44491,"date":"2025-06-19T09:27:41","date_gmt":"2025-06-19T01:27:41","guid":{"rendered":"https:\/\/www.wsisp.com\/helps\/44491.html"},"modified":"2025-06-19T09:27:41","modified_gmt":"2025-06-19T01:27:41","slug":"4%e6%ad%a5%e4%bd%bf%e7%94%a8-vue3-%e8%b7%af%e7%94%b1","status":"publish","type":"post","link":"https:\/\/www.wsisp.com\/helps\/44491.html","title":{"rendered":"4\u6b65\u4f7f\u7528 vue3 \u8def\u7531"},"content":{"rendered":"

\u00a0\u8def\u7531\u7684\u57fa\u672c\u4f7f\u7528\u6b65\u9aa4<\/span>\u5206\u4e3a\u4ee5\u4e0b<\/span>4<\/span>\u6b65<\/span>\"\"<\/p>\n

\u00a0\u7b2c\u4e00\u6b65：\u5b9a\u4e49\u8def\u7531\u7ec4\u4ef6：\u7565<\/h3>\n

\u00a0\u7b2c\u4e8c\u6b65：\u5b9a\u4e49\u8def\u7531\u94fe\u63a5\u548c\u8def\u7531\u89c6\u56fe：<\/h3>\n

<template>
\n <div class="app-container">
\n <h1>App\u6839\u7ec4\u4ef6<\/h1>
\n <router-link to="\/home">\u9996\u9875<\/router-link>
\n <router-link to="\/about">\u5173\u4e8e<\/router-link>
\n <hr>
\n <router-view><\/router-view>
\n <\/div>
\n<\/template><\/p>\n

\u6211\u4eec\u6f14\u793a\u9879\u76ee\u7684\u5b9a\u4e49\u8def\u7531\u94fe\u63a5\u4e0e\u8def\u7531\u89c6\u56fe\u5982\u4e0b：<\/p>\n

<template>
\n<div class="home_container">
\n <el-container><\/p>\n

<!–\u5934\u90e8 start–>
\n<el-header class="top-header">
\n<el-text class="home_title">\u4e1c\u8f6f\u4e91\u533b\u9662HIS\u7cfb\u7edf<\/el-text>
\n<div class="home_userinfoContainer" >
\n <el-dropdown @command="handleCommand">
\n <el-button type="primary">
\n<el-avatar size="small" style="margin-right:10px ;"
\n src="https:\/\/cube.elemecdn.com\/0\/88\/03b0d39583f48206768a7534e55bcpng.png" \/>
\n{{userStore.getUserInfo.value.realName}}<el-icon class="el-icon–right"><arrow-down \/><\/el-icon>
\n <\/el-button>
\n <template #dropdown>
\n <el-dropdown-menu>
\n <el-dropdown-item command="" >\u6211\u7684\u8bbe\u7f6e<\/el-dropdown-item>
\n <el-dropdown-item command="logout">\u9000\u51fa\u767b\u5f55<\/el-dropdown-item>
\n <\/el-dropdown-menu>
\n <\/template>
\n <\/el-dropdown>
\n<\/div>
\n<\/el-header>
\n<!–\u5934\u90e8 end–><\/p>\n

<el-container>
\n<!–\u5de6\u4fa7\u8fb9\u680f start –>
\n <el-aside width="200px" >
\n <el-menu
\n default-active="2"
\n class="el-menu-vertical-demo"
\nrouter @select="addTab" style="height: 700px">
\n<el-menu-item>
\n <el-icon><document \/><\/el-icon><el-text class="mx-1" size="large">{{menus.meta.title}}<\/el-text>
\n<\/el-menu-item>
\n <el-menu-item v-for="(menu,index) in menus.children" :index="menu.path" :key="menu.path" >
\n <el-icon><document \/><\/el-icon>{{menu.name}}
\n<\/el-menu-item>
\n <\/el-menu>
\n<\/el-aside>
\n<!–\u5de6\u4fa7\u8fb9\u680f end –> <\/p>\n

<el-container>
\n <el-main class="main">
\n<el-tabs v-model="editableTabsValue" type="card" editable
\n @edit="handleTabsEdit" @tab-click="clickTag" >
\n<el-tab-pane
\nalign="center"
\n :key="item.name"
\n v-for="(item, index) in editableTabs"
\n :label="item.title"
\n :name="item.name"
\n :route="item.route"
\n>
\n<router-view><\/router-view>
\n<\/el-tab-pane>
\n<\/el-tabs>
\n <\/el-main>
\n<\/el-container>
\n <\/el-container>
\n <\/el-container>
\n <\/div>
\n<\/template><\/p>\n

<script setup>
\nimport {computed, ref} from 'vue'
\nimport { useRouter } from 'vue-router'
\nimport { postReq } from '..\/utils\/api'
\nimport { useUserStore } from '..\/store\/user.js'
\n\/\/\u8def\u7531
\nconst router = useRouter()
\n\/\/\u83b7\u53d6\u7528\u6237\u4ed3\u5e93\u5bf9\u8c61
\nconst userStore=useUserStore()
\nconst menus=router.options.routes.find(m=>m.role==userStore.getUserInfo.value.useType);
\nconst editableTabsValue=ref('')
\nconst editableTabs=ref([])
\nconst tabIndex=ref(0)<\/p>\n

\/\/\u67e5\u627e\u8def\u5f84\u5bf9\u5e94\u7684\u8def\u7531
\nfunction findCompontByPath(path){
\nlet a=menus.children.find(m=>m.path==path);
\nif (a) {
\nreturn a;
\n}
\nreturn null;
\n}<\/p>\n

\/\/\u6253\u5f00\u65b0\u7a97\u53e3
\nfunction clickTag(tag,e){
\n\/\/console.log(tag.paneName)
\nrouter.push(tag.paneName)
\n}
\nfunction addTab(path){
\nif(path){
\nlet componet=findCompontByPath(path)
\nif (componet) {
\n if (!editableTabs.value.find(t => t.name == componet.path)) {
\neditableTabs.value.push({
\ntitle: componet.name,
\nname: componet.path,
\nroute: componet.path
\n});
\n }
\n editableTabsValue.value = componet.path;
\n router.push(componet.path);
\n}<\/p>\n

}
\n}<\/p>\n

function handleTabsEdit(targetName, action) {
\n if (action === 'remove') {
\nlet tabs = editableTabs.value;
\nlet activeName = editableTabsValue.value;
\nif (activeName === targetName) {
\n tabs.forEach((tab, index) => {
\n\/\/ console.log(tab.name, targetName, tab.name === targetName);
\nif (tab.name === targetName) {
\n let nextTab = tabs[index + 1] || tabs[index – 1];
\n if (nextTab) {
\nactiveName = nextTab.name;
\n }
\n}
\n });
\n}
\neditableTabsValue.value = activeName;
\neditableTabs.value = tabs.filter(tab => tab.name !== targetName);
\nrouter.push(activeName);
\n }
\n}<\/p>\n

function handleCommand(command){
\npostReq("\/user\/logout").then(resp=>{
\nif(resp.data.result){
\nuserStore.logOut();
\nrouter.push("\/login")
\n}
\n})<\/p>\n

}<\/p>\n

<\/script><\/p>\n

<style>
\n.home_container {
\nheight: 100%;
\nposition: absolute;
\ntop: 0px;
\nleft: 0px;
\nwidth: 100%;
\n}
\n.top-header{
\nbackground-color: #20a0ff;
\ncolor: #333;
\ntext-align: center;
\ndisplay: flex;
\nalign-items: center;
\njustify-content: space-between;
\n}
\n.left-aside{
\nbackground-color: #ECECEC;
\n}<\/p>\n

.main{
\nwidth: 100%;
\nheight: 100%;
\nbackground-color: #fff;
\ncolor: #000;
\ntext-align: left;
\n}
\n.home_title {
\ncolor: #fff;
\nfont-size: 22px;
\ndisplay: inline;
\n}<\/p>\n

.home_userinfo {
\ncolor: #fff;
\ncursor: pointer;
\n}<\/p>\n

.home_userinfoContainer {
\ndisplay: inline;
\nmargin-right: 20px;
\ntext-align: right;
\n}
\n<\/style> <\/p>\n

\u5728 Vue Router \u4e2d，<router-view><\/router-view>\u00a0\u7ec4\u4ef6\u7684\u5185\u5bb9\u53d8\u5316\u662f\u57fa\u4e8e\u5f53\u524d\u7684\u8def\u7531\u5339\u914d\u7ed3\u679c\u3002<\/p>\n

\u8def\u7531\u5339\u914d\u4e0e\u89c6\u56fe\u6e32\u67d3\u7684\u5de5\u4f5c\u539f\u7406<\/h4>\n
  • \n

    \u8def\u7531\u914d\u7f6e：Vue Router \u7684\u8def\u7531\u914d\u7f6e\u5b58\u50a8\u5728\u00a0router.options.routes\u00a0\u4e2d，\u60a8\u7684\u4ee3\u7801\u901a\u8fc7\u00a0menus=router.options.routes.find(m=>m.role==userStore.getUserInfo.value.useType)\u00a0\u6765\u83b7\u53d6\u5f53\u524d\u7528\u6237\u89d2\u8272\u5bf9\u5e94\u7684\u8def\u7531\u914d\u7f6e\u3002<\/p>\n<\/li>\n

  • \n

    \u52a8\u6001\u8def\u7531\u5207\u6362：<\/p>\n