feat(nest): 页签支持嵌套路由切换

fix #7

demo/assets/scss/demo.scss

@@ -89,6 +89,19 @@ a:link {
     color: $activeColor;
     border-color: $activeColor;
   }
+
+  &.link {
+    &:hover {
+      color: $color-primary;
+      border-color: $color-primary;
+    }
+
+    &.router-link-exact-active {
+      color: #fff;
+      background-color: $color-primary;
+      border-color: rgba(0,0,0,.05);
+    }
+  }
 
   &.primary {
     color: #fff;

demo/components/AppAside.vue

@@ -28,16 +28,15 @@ export default {
           { text: '默认配置', to: '/default/' },
           { text: '过渡效果', to: '/transition/' },
           { text: '初始展示页签', to: '/initial-tabs/' },
-          {
-            text: '多语言支持',
-            children: [
-              { text: '页签国际化', to: '/i18n/' },
-              { text: '组件语言', to: '/lang-en/' },
-              { text: '组件自定义语言', to: '/lang-custom' }
-            ]
-          },
           { text: '自定义页签模板', to: '/slot/' }
         ]
+      }, {
+        text: '多语言支持',
+        children: [
+          { text: '页签国际化', to: '/i18n/' },
+          { text: '组件语言', to: '/lang-en/' },
+          { text: '组件自定义语言', to: '/lang-custom' }
+        ]
       }, {
         text: '页签规则',
         children: [
@@ -46,10 +45,11 @@ export default {
           { text: '路由页签规则', to: '/default/route-rule/a/1' }
         ]
       }, {
-        text: '页面配置',
+        text: '页面功能',
         children: [
           { text: '动态更新页签配置', to: '/default/tab-dynamic' },
-          { text: '页面离开确认', to: '/initial-tabs/page-leave' }
+          { text: '页面离开确认', to: '/initial-tabs/page-leave' },
+          { text: '嵌套路由', to: '/default/nest/1/page1' }
         ]
       }]
     }

demo/router/index.js

@@ -0,0 +1,100 @@
+import Vue from 'vue'
+import Router from 'vue-router'
+import { RouterTabRoutes } from '../../src'
+import pageRoutes, { route404 } from './page'
+import { importPage, importLayout } from '../utils'
+
+Vue.use(Router)
+
+// 根据 layout 组件名生成标准路由
+function getStandardRoutes (comps) {
+  return comps.map(comp => {
+    // 路径由 'CompName' 转换为 'comp-name'
+    const path = '/' + comp.replace(/([A-Z])/g, function (val, $1, index, str) {
+      let lower = $1.toLowerCase()
+      return index ? '-' + lower : lower
+    }) + '/'
+
+    return {
+      path,
+      component: importLayout(comp),
+      redirect: path + 'page/1',
+      children: pageRoutes
+    }
+  })
+}
+
+// 标准路由
+const standardRoutes = getStandardRoutes([
+  'Default',
+  'Transition',
+  'InitialTabs',
+  'LangEn',
+  'LangCustom',
+  'Slot'
+])
+
+// Vue Router 实例
+const $router = new Router({
+  routes: [{
+    path: '/',
+    redirect: '/default/page/1'
+  },
+  ...standardRoutes,
+  {
+    path: '/default/:did/dd/:iid',
+    component: importLayout('Default'),
+    redirect: '/default/2/dd/gg/nest/67/page/1',
+    children: pageRoutes
+  }, {
+    path: '/i18n/',
+    component: importLayout('I18n'),
+    redirect: '/i18n/lang',
+    children: [{
+      path: 'lang',
+      component: importPage('I18n'),
+      meta: {
+        title: 'i18n:i18n',
+        icon: 'rt-icon-doc'
+      }
+    }, {
+      path: 'page/:id',
+      component: importPage('Page'),
+      meta: {
+        title: 'i18n:page',
+        icon: 'rt-icon-doc'
+      }
+    }, route404, ...RouterTabRoutes]
+  }, {
+    path: '/global-rule/',
+    component: importLayout('GlobalRule'),
+    redirect: '/global-rule/rule/a/1',
+    children: pageRoutes
+  },
+
+  // 根路由 404
+  Object.assign({}, route404, {
+    path: '/404'
+  }),
+
+  // 未匹配的路由 404
+  {
+    path: '*',
+    redirect (to) {
+      const match = /^(\/[^/]+\/)/.exec(to.path)
+
+      if (match) {
+        const base = match[1]
+        const matchParent = $router.options.routes.find(item => item.path === base)
+
+        // 子路由 404
+        if (matchParent) return base + '404'
+      }
+
+      // 根路由 404
+      return '/404'
+    }
+  }]
+})
+
+export default $router

demo/router/page.js

@@ -0,0 +1,76 @@
+import { RouterTabRoutes } from '../../src'
+import { importPage } from '../utils'
+
+// 404 路由
+export const route404 = {
+  path: '404',
+  component: importPage('404'),
+  meta: {
+    title: '找不到页面',
+    icon: 'rt-icon-warning'
+  }
+}
+
+// 页面路由
+const pageRoutes = [{
+  path: 'page/:id',
+  component: importPage('Page'),
+  meta: {
+    title: '页面',
+    icon: 'rt-icon-doc'
+  }
+}, {
+  path: 'rule/:catalog/:type',
+  component: importPage('Rule'),
+  meta: {
+    title: '默认规则',
+    icon: 'rt-icon-log'
+  }
+}, {
+  path: 'route-rule/:catalog/:type',
+  component: importPage('Rule'),
+  meta: {
+    title: '路由规则',
+    icon: 'rt-icon-log',
+    aliveId (route, pagePath) {
+      return `route-rule/${route.params.catalog}`
+    }
+  }
+}, {
+  path: 'tab-dynamic',
+  component: importPage('TabDynamic'),
+  meta: {
+    title: '动态更新页签',
+    icon: 'rt-icon-log'
+  }
+}, {
+  path: 'page-leave',
+  component: importPage('PageLeave'),
+  meta: {
+    title: '页面离开确认',
+    icon: 'rt-icon-contact'
+  }
+}, route404, ...RouterTabRoutes]
+
+// 嵌套路由
+const nestRoute = {
+  path: 'nest/:nestId/',
+  component: importPage('Nest'),
+  meta: {
+    title: '嵌套路由',
+    icon: 'rt-icon-doc'
+  },
+  children: [{
+    path: 'page1',
+    component: importPage('Page1')
+  }, {
+    path: 'page2',
+    component: importPage('Page2')
+  }]
+}
+
+// 插入嵌套路由
+pageRoutes.unshift(nestRoute)
+
+// 页面路由
+export default pageRoutes

demo/utils.js

@@ -0,0 +1,3 @@
+export const importPage = view => () => import(/* webpackChunkName: "p-[request]" */ `./views/${view}.vue`)
+
+export const importLayout = view => () => import(/* webpackChunkName: "ly-[request]" */ `./components/layout/${view}.vue`)