feat: routing + navbar

README.md

@@ -26,3 +26,7 @@ $ pnpm build
 ```
 
 
+## notes
+### 添加路由
+
+在[src/router/index.ts](./src/router/index.ts)的常量`pages`中添加。

src/icons/svg/icon-inbox.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M121 32C91.6 32 66 52 58.9 80.5L1.9 308.4C.6 313.5 0 318.7 0 323.9V416c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V323.9c0-5.2-.6-10.4-1.9-15.5l-57-227.9C446 52 420.4 32 391 32H121zm0 64H391l48 192H387.8c-12.1 0-23.2 6.8-28.6 17.7l-14.3 28.6c-5.4 10.8-16.5 17.7-28.6 17.7H195.8c-12.1 0-23.2-6.8-28.6-17.7l-14.3-28.6c-5.4-10.8-16.5-17.7-28.6-17.7H73L121 96z"/></svg>

src/icons/svg/icon-index.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 576 512"><path d="M575.8 255.5c0 18-15 32.1-32 32.1h-32l.7 160.2c0 2.7-.2 5.4-.5 8.1V472c0 22.1-17.9 40-40 40H456c-1.1 0-2.2 0-3.3-.1c-1.4 .1-2.8 .1-4.2 .1H416 392c-22.1 0-40-17.9-40-40V448 384c0-17.7-14.3-32-32-32H256c-17.7 0-32 14.3-32 32v64 24c0 22.1-17.9 40-40 40H160 128.1c-1.5 0-3-.1-4.5-.2c-1.2 .1-2.4 .2-3.6 .2H104c-22.1 0-40-17.9-40-40V360c0-.9 0-1.9 .1-2.8V287.6H32c-18 0-32-14-32-32.1c0-9 3-17 10-24L266.4 8c7-7 15-8 22-8s15 2 21 7L564.8 231.5c8 7 12 15 11 24z"/></svg>

src/icons/svg/icon-product.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M190.5 68.8L225.3 128H224 152c-22.1 0-40-17.9-40-40s17.9-40 40-40h2.2c14.9 0 28.8 7.9 36.3 20.8zM64 88c0 14.4 3.5 28 9.6 40H32c-17.7 0-32 14.3-32 32v64c0 17.7 14.3 32 32 32H480c17.7 0 32-14.3 32-32V160c0-17.7-14.3-32-32-32H438.4c6.1-12 9.6-25.6 9.6-40c0-48.6-39.4-88-88-88h-2.2c-31.9 0-61.5 16.9-77.7 44.4L256 85.5l-24.1-41C215.7 16.9 186.1 0 154.2 0H152C103.4 0 64 39.4 64 88zm336 0c0 22.1-17.9 40-40 40H288h-1.3l34.8-59.2C329.1 55.9 342.9 48 357.8 48H360c22.1 0 40 17.9 40 40zM32 288V464c0 26.5 21.5 48 48 48H224V288H32zM288 512H432c26.5 0 48-21.5 48-48V288H288V512z"/></svg>

src/icons/svg/icon-user.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 512"><path d="M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512H418.3c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304H178.3z"/></svg>

src/router/index.js

@@ -1,158 +0,0 @@
-/* eslint-disable camelcase */
-/**
- * 全站路由配置
- *
- * 建议:
- * 1. 代码中路由统一使用name属性跳转(不使用path属性)
- */
-import Vue from 'vue'
-import Router from 'vue-router'
-import http from '@/utils/httpRequest'
-import { isURL } from '@/utils/validate'
-import { clearLoginInfo } from '@/utils'
-
-Vue.use(Router)
-// 解决路由重复跳转报错
-const originalPush = Router.prototype.push
-const originalReplace = Router.prototype.replace
-// 修改原型对象中的push函数
-Router.prototype.push = function push (location) {
-  return originalPush.call(this, location).catch(err => err)
-}
-// 修改原型对象中的replace函数
-Router.prototype.replace = function replace (location) {
-  return originalReplace.call(this, location).catch(err => err)
-}
-
-// 开发环境不使用懒加载, 因为懒加载页面太多的话会造成webpack热更新太慢, 所以只有生产环境使用懒加载
-const _import = require('./import-' + process.env.NODE_ENV)
-
-// 全局路由(无需嵌套上左右整体布局)
-const globalRoutes = [
-  { path: '/404', component: _import('common/404'), name: '404', meta: { title: '404未找到' } },
-  { path: '/login', component: _import('common/login'), name: 'login', meta: { title: '登录' } }
-]
-
-// 主入口路由(需嵌套上左右整体布局)
-const mainRoutes = {
-  path: '/',
-  component: _import('main'),
-  name: 'main',
-  redirect: { name: 'home' },
-  meta: { title: '主入口整体布局' },
-  children: [
-    // 通过meta对象设置路由展示方式
-    // 1. isTab: 是否通过tab展示内容, true: 是, false: 否
-    // 2. iframeUrl: 是否通过iframe嵌套展示内容, '以http[s]://开头': 是, '': 否
-    // 提示: 如需要通过iframe嵌套展示内容, 但不通过tab打开, 请自行创建组件使用iframe处理!
-    { path: '/home', component: _import('common/home'), name: 'home', meta: { title: '首页' } },
-    { path: '/prodInfo', component: _import('modules/prod/prodInfo'), name: 'prodInfo', meta: { title: '产品详情' } }
-  ],
-  beforeEnter (to, from, next) {
-    let authorization = Vue.cookie.get('Authorization')
-    if (!authorization || !/\S/.test(authorization)) {
-      clearLoginInfo()
-      next({ name: 'login' })
-    }
-    next()
-  }
-}
-
-const router = new Router({
-  mode: 'hash',
-  scrollBehavior: () => ({ y: 0 }),
-  isAddDynamicMenuRoutes: false, // 是否已经添加动态(菜单)路由
-  routes: globalRoutes.concat(mainRoutes)
-})
-
-router.beforeEach((to, from, next) => {
-  // 添加动态(菜单)路由
-  // 1. 已经添加 or 全局路由, 直接访问
-  // 2. 获取菜单列表, 添加并保存本地存储
-  if (router.options.isAddDynamicMenuRoutes || fnCurrentRouteType(to, globalRoutes) === 'global') {
-    next()
-  } else {
-    http({
-      url: http.adornUrl('/sys/menu/nav'),
-      method: 'get',
-      params: http.adornParams()
-    }).then(({ data }) => {
-      sessionStorage.setItem('authorities', JSON.stringify(data.authorities || '[]'))
-      fnAddDynamicMenuRoutes(data.menuList)
-      router.options.isAddDynamicMenuRoutes = true
-      sessionStorage.setItem('menuList', JSON.stringify(data.menuList || '[]'))
-      next({ ...to, replace: true })
-    }).catch((e) => {
-      console.log(`%c${e} 请求菜单列表和权限失败，跳转至登录页！！`, 'color:blue')
-      router.push({ name: 'login' })
-    })
-  }
-})
-
-/**
- * 判断当前路由类型, global: 全局路由, main: 主入口路由
- * @param {*} route 当前路由
- */
-function fnCurrentRouteType (route, globalRoutes = []) {
-  var temp = []
-  for (var i = 0; i < globalRoutes.length; i++) {
-    if (route.path === globalRoutes[i].path) {
-      return 'global'
-    } else if (globalRoutes[i].children && globalRoutes[i].children.length >= 1) {
-      temp = temp.concat(globalRoutes[i].children)
-    }
-  }
-  return temp.length >= 1 ? fnCurrentRouteType(route, temp) : 'main'
-}
-
-/**
- * 添加动态(菜单)路由
- * @param {*} menuList 菜单列表
- * @param {*} routes 递归创建的动态(菜单)路由
- */
-function fnAddDynamicMenuRoutes (menuList = [], routes = []) {
-  var temp = []
-  for (var i = 0; i < menuList.length; i++) {
-    if (menuList[i].list && menuList[i].list.length >= 1) {
-      temp = temp.concat(menuList[i].list)
-    } else if (menuList[i].url && /\S/.test(menuList[i].url)) {
-      menuList[i].url = menuList[i].url.replace(/^\//, '')
-      var route = {
-        path: menuList[i].url.replace('/', '-'),
-        component: null,
-        name: menuList[i].url.replace('/', '-'),
-        meta: {
-          menuId: menuList[i].menuId,
-          title: menuList[i].name,
-          isDynamic: true,
-          isTab: true,
-          iframeUrl: ''
-        }
-      }
-      // url以http[s]://开头, 通过iframe展示
-      if (isURL(menuList[i].url)) {
-        route['path'] = `i-${menuList[i].menuId}`
-        route['name'] = `i-${menuList[i].menuId}`
-        route['meta']['iframeUrl'] = menuList[i].url
-      } else {
-        try {
-          route['component'] = _import(`modules/${menuList[i].url}`) || null
-        } catch (e) { }
-      }
-      routes.push(route)
-    }
-  }
-  if (temp.length >= 1) {
-    fnAddDynamicMenuRoutes(temp, routes)
-  } else {
-    mainRoutes.name = 'main-dynamic'
-    mainRoutes.children = routes
-    router.addRoutes([
-      mainRoutes,
-      { path: '*', redirect: { name: '404' } }
-    ])
-    sessionStorage.setItem('dynamicMenuRoutes', JSON.stringify(mainRoutes.children || '[]'))
-  }
-}
-
-export default router

src/router/index.ts

@@ -0,0 +1,100 @@
+/* eslint-disable camelcase */
+/**
+ * 全站路由配置
+ *
+ * 建议:
+ * 1. 代码中路由统一使用name属性跳转(不使用path属性)
+ */
+import Vue from 'vue'
+import Router from 'vue-router'
+import http from '@/utils/httpRequest'
+import { isURL } from '@/utils/validate'
+import { clearLoginInfo } from '@/utils'
+
+import MainFrame from "@/views/main.vue"
+import Error404 from "@/views/common/404.vue"
+import MainHome from "@/views/common/home.vue"
+
+Vue.use(Router)
+// 解决路由重复跳转报错
+const originalPush = Router.prototype.push
+const originalReplace = Router.prototype.replace
+// 修改原型对象中的push函数
+Router.prototype.push = function push(location) {
+  // @ts-ignore
+  return originalPush.call(this, location).catch(err => err)
+}
+// 修改原型对象中的replace函数
+Router.prototype.replace = function replace(location) {
+  // @ts-ignore
+  return originalReplace.call(this, location).catch(err => err)
+}
+
+// 开发环境不使用懒加载, 因为懒加载页面太多的话会造成webpack热更新太慢, 所以只有生产环境使用懒加载
+const _import = require('./import-' + process.env.NODE_ENV)
+
+export const pages = [
+  {
+    path: "/home",
+    component: MainHome,
+    name: "home",
+    meta: { title: "首页", sidebar: false, icon: "index", isTab: false }
+  }, {
+    path: "/prod/product/list",
+    component: _import("modules/prod/prodList"),
+    name: "prodList",
+    meta: { title: "产品管理", sidebar: true, icon: "product", isTab: true }
+  }, {
+    path: "/prod/product/:id",
+    component: _import("modules/prod/prodInfo"),
+    name: "prodInfo",
+    meta: { title: "产品信息", sidebar: false, icon: "", isTab: false }
+  }, {
+    path: "/prod/category/list",
+    component: _import("modules/prod/category"),
+    name: "categoryList",
+    meta: { title: "分类管理", sidebar: true, icon: "inbox", isTab: true }
+  }, {
+    path: "/user/list",
+    component: _import("modules/user/user"),
+    name: "userList",
+    meta: { title: "用户管理", sidebar: true, icon: "user", isTab: true }
+  }, {
+    path: "/order/list",
+    component: _import("modules/order/order"),
+    name: "orderList",
+    meta: { title: "订单管理", sidebar: true, icon: "order", isTab: true }
+  },
+]
+
+const routes = [
+  { path: '/404', component: Error404, name: '404', meta: { title: '404未找到' } },
+  { path: '/login', component: _import('common/login'), name: 'login', meta: { title: '登录' } },
+  {
+    path: "/",
+    component: MainFrame,
+    name: 'main',
+    redirect: { name: 'home' },
+    meta: { title: '主入口整体布局' },
+    children: pages,
+    beforeEnter(to: string, from: string, next: Function) {
+      // @ts-ignore
+      let authorization = Vue.cookie.get('Authorization')
+      if (!authorization || !/\S/.test(authorization)) {
+        clearLoginInfo()
+        next({ name: 'login' })
+      }
+      next()
+    }
+  }
+]
+
+const router = new Router({
+  mode: 'hash',
+  // @ts-ignore
+  routes,
+  // @ts-ignore
+  scrollBehavior: () => ({ y: 0 }),
+})
+
+export default router

src/views/main-navbar.vue

@@ -1,22 +1,22 @@
 <template>
-  <nav class="site-navbar" :class="'site-navbar--' + navbarLayoutType">
+  <nav class="site-navbar" style="background-color: #29B802;" :class="'site-navbar--' + navbarLayoutType">
     <div class="site-navbar__header">
       <h1 class="site-navbar__brand" @click="$router.push({ name: 'home' })">
-        <a class="site-navbar__brand-lg" href="javascript:;">mall4j建站后台</a>
-        <a class="site-navbar__brand-mini" href="javascript:;">mall4j</a>
+        <a class="site-navbar__brand-lg" style="margin: 0;" href="javascript:;">
+          <icon-svg name="store" class="site-sidebar__menu-icon"></icon-svg>
+          商城后台</a>
+        <a class="site-navbar__brand-mini" href="javascript:;">
+          <icon-svg name="store" class="site-sidebar__menu-icon"></icon-svg>
+        </a>
       </h1>
     </div>
     <div class="site-navbar__body clearfix">
-      <el-menu
-        class="site-navbar__menu"
-        mode="horizontal">
+      <el-menu class="site-navbar__menu" mode="horizontal">
         <el-menu-item class="site-navbar__switch" index="0" @click="sidebarFold = !sidebarFold">
           <icon-svg name="zhedie"></icon-svg>
         </el-menu-item>
       </el-menu>
-      <el-menu
-        class="site-navbar__menu site-navbar__menu--right"
-        mode="horizontal">
+      <el-menu class="site-navbar__menu site-navbar__menu--right" mode="horizontal">
         <el-menu-item class="site-navbar__avatar" index="3">
           <el-dropdown :show-timeout="0" placement="bottom">
             <span class="el-dropdown-link">
@@ -36,58 +36,70 @@
 </template>
 
 <script>
-  import UpdatePassword from './main-navbar-update-password'
-  import { clearLoginInfo } from '@/utils'
-  export default {
-    data () {
-      return {
-        updatePassowrdVisible: false
-      }
+import UpdatePassword from './main-navbar-update-password'
+import { clearLoginInfo } from '@/utils'
+export default {
+  data() {
+    return {
+      updatePassowrdVisible: false
+    }
+  },
+  components: {
+    UpdatePassword
+  },
+  computed: {
+    navbarLayoutType: {
+      get() { return this.$store.state.common.navbarLayoutType }
+    },
+    sidebarFold: {
+      get() { return this.$store.state.common.sidebarFold },
+      set(val) { this.$store.commit('common/updateSidebarFold', val) }
     },
-    components: {
-      UpdatePassword
+    mainTabs: {
+      get() { return this.$store.state.common.mainTabs },
+      set(val) { this.$store.commit('common/updateMainTabs', val) }
     },
-    computed: {
-      navbarLayoutType: {
-        get () { return this.$store.state.common.navbarLayoutType }
-      },
-      sidebarFold: {
-        get () { return this.$store.state.common.sidebarFold },
-        set (val) { this.$store.commit('common/updateSidebarFold', val) }
-      },
-      mainTabs: {
-        get () { return this.$store.state.common.mainTabs },
-        set (val) { this.$store.commit('common/updateMainTabs', val) }
-      },
-      userName: {
-        get () { return this.$store.state.user.name }
-      }
+    userName: {
+      get() { return this.$store.state.user.name }
+    }
+  },
+  methods: {
+    // 修改密码
+    updatePasswordHandle() {
+      this.updatePassowrdVisible = true
+      this.$nextTick(() => {
+        this.$refs.updatePassowrd.init()
+      })
     },
-    methods: {
-      // 修改密码
-      updatePasswordHandle () {
-        this.updatePassowrdVisible = true
-        this.$nextTick(() => {
-          this.$refs.updatePassowrd.init()
+    // 退出
+    logoutHandle() {
+      this.$confirm(`确定进行[退出]操作?`, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.$http({
+          url: this.$http.adornUrl('/logOut'),
+          method: 'post',
+          data: this.$http.adornData()
+        }).then(({ data }) => {
+          clearLoginInfo()
+          this.$router.push({ name: 'login' })
         })
-      },
-      // 退出
-      logoutHandle () {
-        this.$confirm(`确定进行[退出]操作?`, '提示', {
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
-          type: 'warning'
-        }).then(() => {
-          this.$http({
-            url: this.$http.adornUrl('/logOut'),
-            method: 'post',
-            data: this.$http.adornData()
-          }).then(({data}) => {
-            clearLoginInfo()
-            this.$router.push({ name: 'login' })
-          })
-        }).catch(() => {})
-      }
+      }).catch(() => { })
     }
   }
+}
 </script>
+
+<style lang="scss">
+.site-navbar__brand {
+  padding: 0 20px;
+}
+
+.site-sidebar--fold {
+  .site-navbar__brand {
+    padding: 0;
+  }
+}
+</style>

src/views/main-sidebar-sub-menu.vue

@@ -1,55 +1,42 @@
 <template>
-  <el-submenu 
-    v-if="menu.list && menu.list.length >= 1"
-    :index="menu.menuId + ''"
+  <!--el-submenu v-if="menu.list && menu.list.length >= 1" :index="menu.menuId + ''"
     :popper-class="'site-sidebar--' + sidebarLayoutSkin + '-popper'">
     <template slot="title">
       <icon-svg :name="menu.icon || ''" class="site-sidebar__menu-icon"></icon-svg>
       <span>{{ menu.name }}</span>
     </template>
-    <sub-menu
-      v-for="item in menu.list" 
-      :key="item.menuId"
-      :menu="item"
-      :dynamicMenuRoutes="dynamicMenuRoutes">
+    <sub-menu v-for="item in menu.list" :key="item.menuId" :menu="item">
     </sub-menu>
-  </el-submenu>
-  <el-menu-item v-else :index="menu.menuId + ''" @click="gotoRouteHandle(menu)">
+  </el-submenu-->
+  <el-menu-item :index="menu.index + ''" @click="gotoRouteHandle()">
     <icon-svg :name="menu.icon || ''" class="site-sidebar__menu-icon"></icon-svg>
     <span>{{ menu.name }}</span>
   </el-menu-item>
 </template>
 
-<script>
-  import SubMenu from './main-sidebar-sub-menu'
-  export default {
-    name: 'sub-menu',
-    props: {
-      menu: {
-        type: Object,
-        required: true
-      },
-      dynamicMenuRoutes: {
-        type: Array,
-        required: true
-      }
+<script lang="ts">
+import Vue from 'vue'
+// import SubMenu from './main-sidebar-sub-menu'
+export default Vue.extend({
+  name: 'sub-menu',
+  props: {
+    menu: {
+      type: Object,
+      required: true
     },
-    components: {
-      SubMenu
-    },
-    computed: {
-      sidebarLayoutSkin: {
-        get () { return this.$store.state.common.sidebarLayoutSkin }
-      }
-    },
-    methods: {
-      // 通过menuId与动态(菜单)路由进行匹配跳转至指定路由
-      gotoRouteHandle (menu) {
-        var route = this.dynamicMenuRoutes.filter(item => item.meta.menuId === menu.menuId)
-        if (route.length >= 1) {
-          this.$router.push({ name: route[0].name })
-        }
-      }
+  },
+  // components: {
+  //   SubMenu
+  // },
+  // computed: {
+  //   sidebarLayoutSkin: {
+  //     get() { return this.$store.state.common.sidebarLayoutSkin }
+  //   }
+  // },
+  methods: {
+    gotoRouteHandle() {
+      this.$router.push(this.menu.url)
     }
   }
+})
 </script>

src/views/main-sidebar.vue

@@ -1,96 +1,92 @@
 <template>
   <aside class="site-sidebar" :class="'site-sidebar--' + sidebarLayoutSkin">
     <div class="site-sidebar__inner">
-      <el-menu
-        :default-active="menuActiveName || 'home'"
-        :collapse="sidebarFold"
-        :collapseTransition="false"
+      <el-menu :default-active="menuActiveName || 'home'" :collapse="sidebarFold" :collapseTransition="false"
         class="site-sidebar__menu">
         <el-menu-item index="home" @click="$router.push({ name: 'home' })">
-          <icon-svg name="shouye" class="site-sidebar__menu-icon"></icon-svg>
+          <icon-svg name="index" class="site-sidebar__menu-icon"></icon-svg>
           <span slot="title">首页</span>
         </el-menu-item>
-        <sub-menu
-          v-for="menu in menuList"
-          :key="menu.menuId"
-          :menu="menu"
-          :dynamicMenuRoutes="dynamicMenuRoutes">
-        </sub-menu>
+        <sub-menu v-for="menu in menuList" :key="menu.index" :menu="menu"></sub-menu>
       </el-menu>
     </div>
   </aside>
 </template>
 
 <script>
-  import SubMenu from './main-sidebar-sub-menu'
-  import { isURL } from '@/utils/validate'
-  export default {
-    data () {
+import SubMenu from './main-sidebar-sub-menu'
+import { isURL } from '@/utils/validate'
+import { pages } from "@/router"
+
+export default {
+  data() {
+    const menuList = pages.filter(
+      v => v?.meta?.sidebar
+    ).map((v, i) => {
       return {
-        dynamicMenuRoutes: []
+        index: i,
+        url: v.path,
+        name: v.meta?.title || v.name || "",
+        icon: v.meta.icon || "",
+        list: null,
       }
+    })
+    return { menuList }
+  },
+  components: { SubMenu },
+  computed: {
+    sidebarLayoutSkin() {
+      return this.$store.state.common.sidebarLayoutSkin
     },
-    components: {
-      SubMenu
-    },
-    computed: {
-      sidebarLayoutSkin: {
-        get () { return this.$store.state.common.sidebarLayoutSkin }
-      },
-      sidebarFold: {
-        get () { return this.$store.state.common.sidebarFold }
-      },
-      menuList: {
-        get () { return this.$store.state.common.menuList },
-        set (val) { this.$store.commit('common/updateMenuList', val) }
-      },
-      menuActiveName: {
-        get () { return this.$store.state.common.menuActiveName },
-        set (val) { this.$store.commit('common/updateMenuActiveName', val) }
-      },
-      mainTabs: {
-        get () { return this.$store.state.common.mainTabs },
-        set (val) { this.$store.commit('common/updateMainTabs', val) }
-      },
-      mainTabsActiveName: {
-        get () { return this.$store.state.common.mainTabsActiveName },
-        set (val) { this.$store.commit('common/updateMainTabsActiveName', val) }
-      }
+    sidebarFold() {
+      return this.$store.state.common.sidebarFold
     },
-    watch: {
-      $route: 'routeHandle'
+    menuActiveName: {
+      get() { return this.$store.state.common.menuActiveName },
+      set(val) { this.$store.commit('common/updateMenuActiveName', val) }
     },
-    created () {
-      this.menuList = JSON.parse(sessionStorage.getItem('menuList') || '[]')
-      this.dynamicMenuRoutes = JSON.parse(sessionStorage.getItem('dynamicMenuRoutes') || '[]')
-      this.routeHandle(this.$route)
+    mainTabs: {
+      get() { return this.$store.state.common.mainTabs },
+      set(val) { this.$store.commit('common/updateMainTabs', val) }
     },
-    methods: {
-      // 路由操作
-      routeHandle (route) {
-        if (route.meta.isTab) {
-          // tab选中, 不存在先添加
-          var tab = this.mainTabs.filter(item => item.name === route.name)[0]
-          if (!tab) {
-            if (route.meta.isDynamic) {
-              route = this.dynamicMenuRoutes.filter(item => item.name === route.name)[0]
-              if (!route) {
-                return console.error('未能找到可用标签页!')
-              }
-            }
-            tab = {
-              menuId: route.meta.menuId || route.name,
-              name: route.name,
-              title: route.meta.title,
-              type: isURL(route.meta.iframeUrl) ? 'iframe' : 'module',
-              iframeUrl: route.meta.iframeUrl || ''
+    mainTabsActiveName: {
+      get() { return this.$store.state.common.mainTabsActiveName },
+      set(val) { this.$store.commit('common/updateMainTabsActiveName', val) }
+    }
+  },
+  watch: {
+    $route: 'routeHandle'
+  },
+  created() {
+    this.routeHandle(this.$route)
+  },
+  methods: {
+    // 路由操作
+    routeHandle(route) {
+      console.log(route)
+      if (route.meta.isTab) {
+        // tab选中, 不存在先添加
+        var tab = this.mainTabs.filter(item => item.name === route.name)[0]
+        if (!tab) {
+          if (route.meta.isDynamic) {
+            route = this.dynamicMenuRoutes.filter(item => item.name === route.name)[0]
+            if (!route) {
+              return console.error('未能找到可用标签页!')
             }
-            this.mainTabs = this.mainTabs.concat(tab)
           }
-          this.menuActiveName = tab.menuId + ''
-          this.mainTabsActiveName = tab.name
+          tab = {
+            menuId: route.meta.menuId || route.name,
+            name: route.name,
+            title: route.meta.title,
+            type: isURL(route.meta.iframeUrl) ? 'iframe' : 'module',
+            iframeUrl: route.meta.iframeUrl || ''
+          }
+          this.mainTabs = this.mainTabs.concat(tab)
         }
+        this.menuActiveName = tab.menuId + ''
+        this.mainTabsActiveName = tab.name
       }
     }
   }
+}
 </script>