perf: router typescript 支持

BoBoooooo · Nov 20, 2020 · da9bcdb · da9bcdb
1 parent d1885dd
commit da9bcdb
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 51 deletions.
diff --git a/src/router/index.ts b/src/router/index.ts
@@ -4,7 +4,6 @@
  *       路由表中属性的作用：
  *       hidden: true 在侧边栏隐藏该菜单
  *       redirect: noredirect 不重定向
- *       noDropdown: true 表示没有子菜单
  *       name: 路由名称，必须设置，用于<keep-alive>
  *       title: 在菜单栏和面包屑上显示的标题
  *       icon: svgIcon icon-class名称等于菜单名称,详见icons/svg/menu
@@ -14,63 +13,43 @@
  * @updateDate 2020年06月17日11:23:04
  */
 import Vue from 'vue';
-import Router from 'vue-router';
+import VueRouter, { RouteConfig } from 'vue-router';
 import Layout from '../views/layout/Layout.vue';
 
-// const originalPush = Router.prototype.push;
-
-// // 处理路由跳转会报错的问题
-// Router.prototype.push = function push(...rest) {
-//   return (originalPush as any).apply(this, rest).catch(err => err);
-// };
-
-Vue.use(Router);
+Vue.use(VueRouter);
 
 // 用于多级菜单时候作为router-view入口用
 const RouteView = () => ({ render: h => h('router-view') });
 
-
-interface RouterType {
-  path: string, // 路由path
-  component?: any, // 引用的组件
-  name?: string, // routerName,切勿重复
-  title?: string, // 此处title同时配置icon名称,如果有需求可自行新增icon属性,修改sidebaritem相关代码
-  hidden?: boolean, // 是否隐藏
-  redirect?: string, // 是否重定向
-  children?: any, // 是否含有二级路由
-  noDropdown?:boolean, // 不显示下拉列表,用于一级菜单的情况
-  meta?:object // 自定义属性
-}
-
-
 // 固定路由表
-export const constantRouterMap:RouterType[] = [
+export const constantRouterMap:RouteConfig[] = [
   {
     path: '/',
     redirect: '/dashboard',
     component: () => import('@/views/layout/Layout.vue'),
-    hidden: true,
+    meta: { hidden: true },
     name: 'dashboard',
   },
-  { path: '/login', component: () => import('@/views/public/Login.vue'), hidden: true },
+  { path: '/login', component: () => import('@/views/public/Login.vue'), meta: { hidden: true } },
   {
-    path: '/404', name: 'notFound', component: () => import('@/views/public/404.vue'), hidden: true,
+    path: '/404', name: 'notFound', component: () => import('@/views/public/404.vue'), meta: { hidden: true },
   },
 ];
 
-export const router = new Router({
+export const router = new VueRouter({
   routes: constantRouterMap,
 });
 
 
 // 异步路由
-const asyncRouter:RouterType[] = [
+const asyncRouter:RouteConfig[] = [
   {
     path: '/dashboard',
     component: Layout,
-    noDropdown: true,
     name: 'dashboardForUser',
-    title: '首页',
+    meta: {
+      title: '首页',
+    },
     redirect: '/dashboard/dashboard',
     children: [{
       path: 'dashboard',
@@ -85,7 +64,9 @@ const asyncRouter:RouterType[] = [
     path: '/system',
     component: Layout,
     name: 'System',
-    title: '系统管理',
+    meta: {
+      title: '系统管理',
+    },
     children: [
       {
         path: 'users',
@@ -111,7 +92,9 @@ const asyncRouter:RouterType[] = [
     path: '/dev-tools',
     component: Layout,
     name: 'DevTools',
-    title: '开发人员工具',
+    meta: {
+      title: '开发人员工具',
+    },
     children: [
       {
         path: 'form-designer',
@@ -133,7 +116,11 @@ const asyncRouter:RouterType[] = [
       },
     ],
   },
-  { path: '*', redirect: '/404', hidden: true },
+  {
+    path: '*',
+    redirect: '/404',
+    meta: { hidden: true },
+  },
 
 ];
 

diff --git a/src/views/layout/components/MenuItem.vue b/src/views/layout/components/MenuItem.vue
@@ -8,30 +8,26 @@
 <template>
   <div class="menu-wrapper">
     <template v-for="item in routes">
-      <router-link v-if="!item.hidden&&item.children.length===1"
+      <router-link v-if="!item.meta.hidden && item.children && item.children.length===1"
                    :key="item.name"
-                   :to="item.path === '/' ? '/':item.path+'/'+item.children[0].path">
+                   :to="{name:item.children[0].name}">
         <el-tooltip effect="dark"
                     :content="item.children[0].meta.title"
                     placement="right">
-          <el-menu-item :index="item.path === '/' ? '/':item.path+'/'+item.children[0].path">
-            <!-- <SvgIcon v-if="item.icon"
-                    :icon-class="item.icon" /> {{ item.children[0].meta.title }} -->
-            <SvgIcon :icon-class="item.title" /> {{ item.children[0].meta.title }}
+        <el-menu-item :index="item.children[0].name">
+            <SvgIcon :icon-class="item.meta.title" /> {{ item.children[0].meta.title }}
           </el-menu-item>
         </el-tooltip>
       </router-link>
-      <el-submenu v-else-if="!item.noDropdown&&!item.hidden"
+      <el-submenu v-else-if="!item.meta.hidden && item.children"
                   :index="item.name"
                   :key="item.name">
         <template slot="title">
-          <!-- <SvgIcon v-if="item.icon"
-                    :icon-class="item.icon" /> {{ item.title }} -->
-          <SvgIcon :icon-class="item.title" /> {{ item.title }}
+          <SvgIcon :icon-class="item.meta.title" /> {{ item.meta.title }}
         </template>
-        <template v-for="child in item.children"
-                  v-if="!child.hidden">
-          <navmenu-item v-if="child.children&&child.children.length>0"
+              <template v-for="child in item.children.filter(s=> !s.meta.hidden)">
+
+       <menu-item v-if="child.children && child.children.length>0"
                         :key="child.name"
                         :routes="[child]"
                         class="menu-indent" />
@@ -52,16 +48,18 @@
 
 <script lang="ts">
 import { Component, Vue, Prop } from 'vue-property-decorator';
+import { RouteConfig } from 'vue-router';
 
 @Component({
   name: 'MenuItem',
 })
 export default class MenuItem extends Vue {
   @Prop({
     type: Array,
+    required: true,
     default: () => [],
   })
-  routes: any;
+  private routes!: RouteConfig;
 }
 </script>
 

diff --git a/src/views/public/404.vue b/src/views/public/404.vue
@@ -27,7 +27,7 @@ import { Component, Vue } from 'vue-property-decorator';
 @Component({
   name: 'notFound',
 })
-export default class {
+export default class notFound extends Vue {
   goLogin() {
     this.$store.commit('SET_TOKEN', null);
     window.location.reload();

diff --git a/src/views/public/Login.vue b/src/views/public/Login.vue
@@ -71,7 +71,7 @@ import { mapGetters } from 'vuex';
     ...mapGetters(['config']),
   },
 })
-export default class Login {
+export default class Login extends Vue {
   loginForm = {
     username: '',
     password: '',