{"id":528,"date":"2025-12-05T19:38:20","date_gmt":"2025-12-05T11:38:20","guid":{"rendered":"https:\/\/www.52runoob.com\/?p=528"},"modified":"2025-12-05T19:38:20","modified_gmt":"2025-12-05T11:38:20","slug":"vue-%e4%b8%8d%e5%ae%8c%e7%be%8e%e7%9a%84%e5%a4%9a%e6%a0%87%e7%ad%be%e9%a1%b5%e5%ad%98%e5%9c%a8%e9%97%ae%e9%a2%98%e5%8f%8a%e8%a7%a3%e5%86%b3%e6%96%b9%e6%a1%88","status":"publish","type":"post","link":"https:\/\/www.52runoob.com\/index.php\/2025\/12\/05\/vue-%e4%b8%8d%e5%ae%8c%e7%be%8e%e7%9a%84%e5%a4%9a%e6%a0%87%e7%ad%be%e9%a1%b5%e5%ad%98%e5%9c%a8%e9%97%ae%e9%a2%98%e5%8f%8a%e8%a7%a3%e5%86%b3%e6%96%b9%e6%a1%88\/","title":{"rendered":"vue\u00a0\u4e0d\u5b8c\u7f8e\u7684\u591a\u6807\u7b7e\u9875\u5b58\u5728\u95ee\u9898\u53ca\u89e3\u51b3\u65b9\u6848"},"content":{"rendered":"\n<p>\u4e0b\u9762\u7ed9\u4f60\u6574\u7406\u4e00\u4efd <strong>Vue \u9879\u76ee\u4e2d\u201c\u4e0d\u5b8c\u7f8e\u7684\u591a\u6807\u7b7e\u9875\uff08Tab\uff09\u5b9e\u73b0\u201d\u95ee\u9898\u5206\u6790 + \u89e3\u51b3\u65b9\u6848\u5168\u6307\u5357<\/strong>\uff0c\u6db5\u76d6 Vue2 \/ Vue3\u3001Element Plus \/\u81ea\u5b9a\u4e49 Tab \u573a\u666f\uff0c\u975e\u5e38\u9002\u5408\u4e2d\u5927\u578b\u540e\u53f0\u7ba1\u7406\u7cfb\u7edf\u3002<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">\ud83d\udd25 \u4e00\u3001\u95ee\u9898\u573a\u666f<\/h1>\n\n\n\n<p>\u5f88\u591a\u540e\u53f0\u7cfb\u7edf\u90fd\u4f1a\u5b9e\u73b0 <strong>\u591a\u6807\u7b7e\u9875\u529f\u80fd<\/strong>\uff0c\u4f8b\u5982\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u5de6\u4fa7\u83dc\u5355\u70b9\u51fb\u6253\u5f00\u53f3\u4fa7\u5185\u5bb9 Tab<\/li>\n\n\n\n<li>\u53ef\u5173\u95ed Tab<\/li>\n\n\n\n<li>\u53ef\u62d6\u62fd \/ \u5207\u6362 Tab<\/li>\n\n\n\n<li>\u4fdd\u7559\u7ec4\u4ef6\u72b6\u6001<\/li>\n<\/ul>\n\n\n\n<p><strong>\u5e38\u89c1\u95ee\u9898<\/strong>\uff1a<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">1\ufe0f\u20e3 \u6807\u7b7e\u9875\u72b6\u6001\u4e22\u5931<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u5207\u6362 Tab \u65f6\u7ec4\u4ef6\u91cd\u65b0\u6e32\u67d3\uff0c\u5bfc\u81f4\u8868\u5355\u8f93\u5165\u3001\u6eda\u52a8\u4f4d\u7f6e\u4e22\u5931\u3002<\/li>\n\n\n\n<li>\u539f\u56e0\uff1aVue \u9ed8\u8ba4\u7ec4\u4ef6\u9500\u6bc1\u91cd\u5efa\u3002<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">2\ufe0f\u20e3 \u591a\u6807\u7b7e\u9875\u8fc7\u591a\uff0c\u6027\u80fd\u95ee\u9898<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u76f4\u63a5\u7528 <code>v-for<\/code> \u6e32\u67d3\u6240\u6709 Tab \u5185\u5bb9\uff0c\u7ec4\u4ef6\u5168\u90e8\u6302\u8f7d\u5728 DOM \u4e0a<\/li>\n\n\n\n<li>\u9875\u9762\u7ec4\u4ef6\u590d\u6742\u65f6\uff0c\u5207\u6362\u5361\u987f<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">3\ufe0f\u20e3 Tab \u987a\u5e8f\u6df7\u4e71 \/ \u91cd\u590d\u6253\u5f00<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u540c\u4e00\u4e2a\u83dc\u5355\u591a\u6b21\u70b9\u51fb\uff0c\u91cd\u590d\u751f\u6210 Tab<\/li>\n\n\n\n<li>\u9700\u8981\u552f\u4e00\u6807\u8bc6<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">4\ufe0f\u20e3 \u8def\u7531\u4e0e Tab \u72b6\u6001\u4e0d\u540c\u6b65<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u7528\u6237\u5237\u65b0\u9875\u9762\uff0cTab \u72b6\u6001\u4e22\u5931<\/li>\n\n\n\n<li>\u8def\u7531\u5237\u65b0\u540e\u65e0\u6cd5\u8fd8\u539f\u4e0a\u6b21\u6253\u5f00\u7684 Tabs<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">5\ufe0f\u20e3 \u6807\u7b7e\u9875\u5173\u95ed\u903b\u8f91\u590d\u6742<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u5173\u95ed\u5f53\u524d Tab \u9700\u8981\u81ea\u52a8\u5207\u6362\u5230\u524d\u4e00\u4e2a\u6216\u4e0b\u4e00\u4e2a Tab<\/li>\n\n\n\n<li>\u5982\u679c\u672a\u5904\u7406\u597d index \u6216 key\uff0c\u53ef\u80fd\u62a5\u9519\u6216\u5207\u6362\u9519\u8bef<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">\ud83d\udd27 \u4e8c\u3001\u89e3\u51b3\u65b9\u6848<\/h1>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">1\ufe0f\u20e3 \u4f7f\u7528 <strong>keep-alive<\/strong> \u4fdd\u7559\u7ec4\u4ef6\u72b6\u6001<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">\u793a\u4f8b\uff1a<\/h3>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n&amp;lt;keep-alive&gt;\n  &amp;lt;component :is=&quot;currentTab.component&quot; v-if=&quot;currentTab&quot;&gt;&amp;lt;\/component&gt;\n&amp;lt;\/keep-alive&gt;\n\n<\/pre><\/div>\n\n\n<ul class=\"wp-block-list\">\n<li>\u4f18\u70b9\uff1a\u5207\u6362 Tab \u65f6\u4e0d\u9500\u6bc1\u7ec4\u4ef6<\/li>\n\n\n\n<li>\u6ce8\u610f\uff1a<code>include<\/code> \u5c5e\u6027\u53ef\u4ee5\u6309\u9700\u7f13\u5b58<\/li>\n\n\n\n<li>\u7f3a\u70b9\uff1a\u8fc7\u591a Tab \u4f1a\u5360\u7528\u5185\u5b58\uff0c\u9700\u8981\u5b9a\u671f\u6e05\u7406<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">2\ufe0f\u20e3 \u4f7f\u7528 <strong>\u552f\u4e00 key \u6807\u8bc6 Tab<\/strong><\/h2>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\ntabs.push({\n  title: menu.title,\n  name: menu.path,  \/\/ \u552f\u4e00\u6807\u8bc6\n  component: menu.component\n})\n\n<\/pre><\/div>\n\n\n<ul class=\"wp-block-list\">\n<li>\u907f\u514d\u91cd\u590d Tab<\/li>\n\n\n\n<li><code>v-for<\/code> \u6e32\u67d3\u65f6\u7ed1\u5b9a <code>:key=\"tab.name\"<\/code><\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">3\ufe0f\u20e3 \u52a8\u6001\u7ec4\u4ef6 + \u6309\u9700\u6e32\u67d3<\/h2>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n&amp;lt;component\n  v-for=&quot;tab in tabs&quot;\n  :key=&quot;tab.name&quot;\n  v-show=&quot;tab.name === currentTabName&quot;\n  :is=&quot;tab.component&quot;\n\/&gt;\n\n<\/pre><\/div>\n\n\n<ul class=\"wp-block-list\">\n<li>\u53ea\u6e32\u67d3\u5f53\u524d Tab\uff0c\u5176\u4ed6 Tab \u9690\u85cf<\/li>\n\n\n\n<li>\u51cf\u5c11\u6027\u80fd\u538b\u529b<\/li>\n\n\n\n<li>\u914d\u5408 <code>keep-alive<\/code> \u53ef\u4fdd\u7559\u72b6\u6001<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">4\ufe0f\u20e3 Tab \u72b6\u6001\u6301\u4e45\u5316<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">\u65b9\u6cd5\u4e00\uff1a\u8def\u7531\u6a21\u5f0f<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u4f7f\u7528 Vue Router\uff0c\u5c06 Tab \u5bf9\u5e94\u8def\u5f84\u4f5c\u4e3a\u8def\u7531<\/li>\n\n\n\n<li>\u5237\u65b0\u9875\u9762\u81ea\u52a8\u8fd8\u539f Tab<\/li>\n\n\n\n<li>\u63a8\u8350\u4e0e <code>vuex<\/code> \u6216 <code>pinia<\/code> \u642d\u914d\u7ba1\u7406 Tab \u5217\u8868<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">\u65b9\u6cd5\u4e8c\uff1a\u672c\u5730\u5b58\u50a8<\/h3>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n\/\/ \u5237\u65b0\u9875\u9762\u65f6\u6062\u590d Tabs\nconst tabs = JSON.parse(localStorage.getItem(&quot;tabs&quot;)) || &#x5B;];\n\n<\/pre><\/div>\n\n\n<ul class=\"wp-block-list\">\n<li>\u6253\u5f00\/\u5173\u95ed Tab \u65f6\u66f4\u65b0 localStorage<\/li>\n\n\n\n<li>\u5237\u65b0\u9875\u9762\u81ea\u52a8\u52a0\u8f7d tabs \u72b6\u6001<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">5\ufe0f\u20e3 \u5173\u95ed Tab \u7684\u81ea\u52a8\u5207\u6362\u903b\u8f91<\/h2>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\nfunction closeTab(tabName) {\n  const index = tabs.findIndex(t =&gt; t.name === tabName);\n  tabs.splice(index, 1);\n\n  if (tabName === currentTabName) {\n    const nextTab = tabs&#x5B;index] || tabs&#x5B;index - 1];\n    currentTabName = nextTab?.name || null;\n  }\n}\n\n<\/pre><\/div>\n\n\n<ul class=\"wp-block-list\">\n<li>\u4fdd\u8bc1\u5173\u95ed\u5f53\u524d Tab \u65f6\u5207\u6362\u5230\u76f8\u90bb Tab<\/li>\n\n\n\n<li>\u9632\u6b62 <code>undefined<\/code> \u6216\u7a7a\u9875\u9762<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">6\ufe0f\u20e3 \u4f18\u5316\u6027\u80fd<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u53ea\u7f13\u5b58 <strong>\u6700\u8fd1 N \u4e2a Tab<\/strong><\/li>\n\n\n\n<li>\u4f7f\u7528 <code>keep-alive<\/code> \u7684 <code>max<\/code> \u5c5e\u6027\uff1a<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: plain; title: ; notranslate\" title=\"\">\n&amp;lt;keep-alive :max=&quot;5&quot;&gt;\n  &amp;lt;component :is=&quot;currentTab.component&quot;&gt;&amp;lt;\/component&gt;\n&amp;lt;\/keep-alive&gt;\n\n<\/pre><\/div>\n\n\n<ul class=\"wp-block-list\">\n<li>\u8d85\u8fc7\u6570\u91cf\u81ea\u52a8\u91ca\u653e\u6700\u65e9\u7684 Tab<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">\u26a1 \u4e03\u3001\u603b\u7ed3\u4f18\u5316\u5efa\u8bae<\/h1>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>\u95ee\u9898<\/th><th>\u89e3\u51b3\u65b9\u6848<\/th><\/tr><\/thead><tbody><tr><td>\u6807\u7b7e\u9875\u72b6\u6001\u4e22\u5931<\/td><td><code>keep-alive<\/code> + <code>key<\/code><\/td><\/tr><tr><td>\u91cd\u590d\u6253\u5f00 Tab<\/td><td>\u4f7f\u7528\u552f\u4e00 <code>name<\/code> \u6807\u8bc6<\/td><\/tr><tr><td>\u591a Tab \u8fc7\u591a\u6027\u80fd\u5dee<\/td><td>\u52a8\u6001\u7ec4\u4ef6 + v-show + keep-alive max<\/td><\/tr><tr><td>\u5237\u65b0\u540e Tab \u4e22\u5931<\/td><td>\u8def\u7531 + Vuex\/pinia \u6216 localStorage<\/td><\/tr><tr><td>\u5173\u95ed Tab \u540e\u5207\u6362<\/td><td>\u5173\u95ed\u903b\u8f91\u5904\u7406\u76f8\u90bb Tab<\/td><\/tr><tr><td>\u6eda\u52a8\u4f4d\u7f6e\u4e22\u5931<\/td><td>keep-alive + <code>v-show<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">\ud83d\udd25 \u516b\u3001\u989d\u5916\u5efa\u8bae<\/h1>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Element Plus Tabs<\/strong> \u652f\u6301 <code>closable<\/code> \u4e0e <code>editable-card<\/code><\/li>\n\n\n\n<li>\u5bf9\u4e8e\u8d85\u5927\u7cfb\u7edf\uff0c\u8003\u8651 <strong>\u61d2\u52a0\u8f7d\u7ec4\u4ef6<\/strong><\/li>\n\n\n\n<li>\u4f7f\u7528 <strong>Pinia\/Vuex \u7ba1\u7406 Tabs<\/strong>\uff0c\u65b9\u4fbf\u591a\u9875\u9762\u64cd\u4f5c<\/li>\n\n\n\n<li>\u5bf9\u79fb\u52a8\u7aef\uff0c\u591a Tab \u53ef\u7528 <strong>\u6ed1\u52a8\u5207\u6362<\/strong> \u63d0\u5347\u4f53\u9a8c<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"<p>\u4e0b\u9762\u7ed9\u4f60\u6574\u7406\u4e00\u4efd Vue \u9879\u76ee\u4e2d\u201c\u4e0d\u5b8c\u7f8e\u7684\u591a\u6807\u7b7e\u9875\uff08Tab\uff09\u5b9e\u73b0\u201d\u95ee\u9898\u5206\u6790 + &#8230; <a class=\"more-link\" href=\"https:\/\/www.52runoob.com\/index.php\/2025\/12\/05\/vue-%e4%b8%8d%e5%ae%8c%e7%be%8e%e7%9a%84%e5%a4%9a%e6%a0%87%e7%ad%be%e9%a1%b5%e5%ad%98%e5%9c%a8%e9%97%ae%e9%a2%98%e5%8f%8a%e8%a7%a3%e5%86%b3%e6%96%b9%e6%a1%88\/\">Continue Reading &rarr;<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[49],"tags":[],"class_list":["post-528","post","type-post","status-publish","format-standard","hentry","category-javascript"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts\/528","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/comments?post=528"}],"version-history":[{"count":1,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts\/528\/revisions"}],"predecessor-version":[{"id":529,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/posts\/528\/revisions\/529"}],"wp:attachment":[{"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/media?parent=528"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/categories?post=528"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.52runoob.com\/index.php\/wp-json\/wp\/v2\/tags?post=528"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}