20241026

package.json

@@ -11,6 +11,7 @@
     "core-js": "^2.6.5",
     "vue": "^2.6.10",
     "vue-router": "^3.0.3",
+    "vue-router-tab": "^0.1.9",
     "vuex": "^3.0.1"
   },
   "devDependencies": {

src/components/Frame.vue

@@ -0,0 +1,9 @@
+<template>
+  <div>
+    <div class="app-header">头部</div>
+    <div class="app-body">
+      <div class="app-side">侧边栏</div>
+      <router-tab />
+    </div>
+  </div>
+</template>

src/main.js

@@ -1,10 +1,18 @@
 import Vue from 'vue'
+// eslint-disable-next-line
+import Router from 'vue-router'
+// 引入组件和样式
+import RouterTab from 'vue-router-tab'
+import 'vue-router-tab/dist/lib/vue-router-tab.css'
+
 import App from './App.vue'
 import router from './router'
 import store from './store'
 
 Vue.config.productionTip = false
 
+Vue.use(RouterTab)
+console.log(Vue.prototype)
 new Vue({
   router,
   store,

src/router.js

@@ -1,23 +1,47 @@
 import Vue from 'vue'
 import Router from 'vue-router'
+// RouterTab 内置路由
+import { RouterTabRoutes } from 'vue-router-tab'
+// 引入布局框架组件
+import Frame from './components/Frame.vue'
 import Home from './views/Home.vue'
 
+// 异步加载页面组件
+const importPage = view => () => import(/* webpackChunkName: "p-[request]" */ `./views/${view}.vue`)
+
 Vue.use(Router)
 
 export default new Router({
   routes: [
     {
       path: '/',
-      name: 'home',
-      component: Home
-    },
-    {
-      path: '/about',
-      name: 'about',
-      // route level code-splitting
-      // this generates a separate chunk (about.[hash].js) for this route
-      // which is lazy-loaded when the route is visited.
-      component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
+      redirect: 'Home',
+      component: Frame,
+      children: [
+        ...RouterTabRoutes,
+        {
+          path: '/page/:id',
+          component: importPage('About'),
+          meta: {
+            title: '页面', // 页签标题
+            icon: 'icon-user', // 页签图标，可选
+            tips: '这是一个页面', // 页签提示，可选，如未设置则跟title一致
+            aliveId: 'fullPath', // 路由打开页签规则，可选
+          }
+        },
+        {
+          path: '/404',
+          component: importPage('404'),
+          meta: {
+            title: '找不到页面',
+            icon: 'icon-page'
+          }
+        },
+        {
+          path: '*',
+          redirect: '/404'
+        }
+      ]
     }
   ]
 })

src/views/404.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    404
+  </div>
+</template>

yarn.lock

@@ -7831,7 +7831,15 @@ vue-loader@^15.7.0:
     vue-hot-reload-api "^2.3.0"
     vue-style-loader "^4.1.0"
 
-vue-router@^3.0.3:
+vue-router-tab@^0.1.9:
+  version "0.1.9"
+  resolved "https://registry.yarnpkg.com/vue-router-tab/-/vue-router-tab-0.1.9.tgz#0680791e8a7bf6701ab1a75f2edc1827f2c9d27c"
+  integrity sha512-RH7/JpddTKItovn7tnRlc5g8zN/Zkt6Ntb0Z/k4sVHcEymsbT/psV7/aKSOVgUhFlrjKbFXp1Cg2lAdUSbKyUg==
+  dependencies:
+    vue "^2.5.22"
+    vue-router "^3.0.1"
+
+vue-router@^3.0.1, vue-router@^3.0.3:
   version "3.0.6"
   resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.0.6.tgz#2e4f0f9cbb0b96d0205ab2690cfe588935136ac3"
   integrity sha512-Ox0ciFLswtSGRTHYhGvx2L44sVbTPNS+uD2kRISuo8B39Y79rOo0Kw0hzupTmiVtftQYCZl87mwldhh2L9Aquw==
@@ -7857,7 +7865,7 @@ vue-template-es2015-compiler@^1.9.0:
   resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz#1ee3bc9a16ecbf5118be334bb15f9c46f82f5825"
   integrity sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==
 
-vue@^2.6.10:
+vue@^2.5.22, vue@^2.6.10:
   version "2.6.10"
   resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.10.tgz#a72b1a42a4d82a721ea438d1b6bf55e66195c637"
   integrity sha512-ImThpeNU9HbdZL3utgMCq0oiMzAkt1mcgy3/E6zWC/G6AaQoeuFdsl9nDhTDU3X1R6FK7nsIUuRACVcjI+A2GQ==