主页增加已打开菜单的tab切换功能

public/test/menu.json

@@ -7,12 +7,14 @@
 	{
 		"menuId":"2",
 		"menuName":"单井数据",
-		"icon":"Document"
+		"icon":"Document",
+		"menuLink":"single/wellPatrol.vue"
 	},
 	{
 		"menuId":"3",
 		"menuName":"多井数据",
-		"icon":"DocumentCopy"
+		"icon":"DocumentCopy",
+		"menuLink":"multi/multiPatrol.vue"
 	},
 	{
 		"menuId":"4",

src/pages/Home.vue

@@ -5,7 +5,11 @@
 		<div class="content-box" :class="{ 'content-collapse': collapse }">
 			<el-tabs type="card" v-model="activeTab" closable class="tabWrap" @tab-remove="removeTabHandle">
 				 <el-tab-pane v-for="(item, index) in menuTabs" :key="item.name" :label="item.title" :name="item.name">
-					<el-icon><User/></el-icon>{{item.content}}
+					<transition name="fade">
+						<component :is="item.content"/>
+					</transition>
+					
+					<!-- <component :is="item.content"/> -->
 				 </el-tab-pane>
 			</el-tabs>
 		</div>
@@ -13,63 +17,35 @@
 </template>
 
 <script setup>
-	import { watch,ref } from "vue"
+	import { watch,ref,markRaw} from "vue"
 	
 	import vHeader from "../components/Header.vue"
 	import vSidetree from "../components/Sidetree.vue"
-	//import vTags from "../components/Tags.vue";
 	import { storeToRefs } from 'pinia'
 	import { useHomeStore } from "../store/home.js"
 	
-	/*
-	const store = useStore();
-	const tagsList = computed(() =>
-	    store.state.tagsList.map((item) => item.name)
-	);
-	const collapse = computed(() => store.state.collapse);
-	*/
-   
-   const store=useHomeStore()
-   const  { collapse ,currentMenu,menuTabs,activeTab} = storeToRefs(store)
+	
    
-   /* let origTabs=[{
-	   title: 'Tab 1',
-	   name: '1',
-	   content: 'Tab 1 content',
-   },
-   {
-   	   title: 'Tab 2',
-   	   name: '2',
-   	   content: 'Tab 2 content',
-   }
-   ] */
+    const store=useHomeStore()
+    const  { collapse ,currentMenu,menuTabs,activeTab} = storeToRefs(store)
    
-  /* const activeTabVal=ref('')
-   const tabs=ref(origTabs)
    
-   const addTab=(opt) =>{
-	   tabs.value.push({
-		   title: 'Tab 3',
-		   name: '3',
-		   content: 'Tab 3 content',
-	   });
-	   
-	  
-   } */
-   
-   const removeTabHandle=(tabId)=>{
+    const removeTabHandle=(tabId)=>{
 	   store.closeTab(tabId)
-   }
-   
+    }
+	
+	
    watch(currentMenu,async(newMenu,oldMenu) => {
+	  loadMenuPage(newMenu.menuLink).then(component => {
+		   console.log(component)
+		   newMenu["content"]=markRaw(component.default)
+		   store.addTab(newMenu)
+	   })
+	   
 	   
-	   /* tabs.value.push({
-	   		   title: newMenu.menuName,
-	   		   name: newMenu.menuId,
-	   		   content: newMenu.menuName
-	   }); */
-	   store.addTab(newMenu)
    })
+   
+   const loadMenuPage=(val)=>import(`/src/pages/${val}`)
 </script>
 
 <style scoped>

src/pages/Login.vue

@@ -60,7 +60,7 @@ import { ElMessage } from "element-plus";
 		        if (valid) {
 		            ElMessage.success("登录成功");
 		            localStorage.setItem("ms_username", param.username);
-		            router.push("/Home");
+		            router.push("/home");
 		        } else {
 		            ElMessage.error("登录失败");
 		            return false;

src/pages/multi/multiPatrol.vue

@@ -0,0 +1,9 @@
+<template>
+	<div>多井数据</div>
+</template>
+
+<script>
+</script>
+
+<style>
+</style>

src/pages/single/wellPatrol.vue

@@ -0,0 +1,9 @@
+<template>
+	<div>单井数据</div>
+</template>
+
+<script>
+</script>
+
+<style>
+</style>

src/router/index.js

@@ -9,7 +9,9 @@ const routes = [
 	{
 	    path: "/home",
 	    name: "Home",
-		component: () => import ("../pages/Home.vue")
+		component: () => import ("../pages/Home.vue"),
+		
+		
 	},
 	{
         path: "/login",

src/store/home.js

@@ -21,7 +21,7 @@ export const useHomeStore = defineStore('home', {
 		 this.menuTabs.push({
 			title:menu.menuName,
 			name:menu.menuId,
-			content:menu.menuName
+			content:menu.content||menu.menuName
 		 })
 		 this.activeTab=menu.menuId 
 	  },