14. 基于Vue+Element+nodeJs+Express+MySql后台管理系统-路由管理

一、在main.js同级目录下创建router.js文件用来管理路由：

我这里的路由采用的是history模式：

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

const originalPush = Router.prototype.push
Router.prototype.push = function push (location) {
  return originalPush.call(this, location).catch(err => err)
}

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'login',
      component: () => import('./views/Login.vue'),
      meta: { pagePath: '/' }
    },
    {
      path: '/home',
      name: 'home',
      component: () => import(/* webpackChunkName: "home" */ './views/Home.vue'),
      meta: { pagePath: '/home' },
      children: [
        {
          path: 'user',
          name: 'user',
          component: () => import(/* webpackChunkName: "user" */ './views/User/User.vue'),
          meta: { pagePath: '/home/user' }
        },
        {
          path: 'weekly',
          name: 'weekly',
          component: () => import(/* webpackChunkName: "weekly" */ './views/Weekly/Weekly.vue'),
          meta: { pagePath: '/home/weekly' }
        },
        {
          path: 'weeklyadd',
          name: 'weeklyadd',
          component: () => import(/* webpackChunkName: "weekly" */ './views/Weekly/childViews/WeeklyAdd.vue'),
          meta: { pagePath: '/home/weekly' }
        },
        {
          path: 'weeklyedit',
          name: 'weeklyedit',
          component: () => import(/* webpackChunkName: "weekly" */ './views/Weekly/childViews/WeeklyEdit.vue'),
          meta: { pagePath: '/home/weekly' }
        },
        {
          path: 'weeklydetail',
          name: 'weeklydetail',
          component: () => import(/* webpackChunkName: "weekly" */ './views/Weekly/childViews/WeeklyDetail.vue'),
          meta: { pagePath: '/home/weekly' }
        }
      ]
    },
    {
      path: '/refresh',
      component: () => import(/* webpackChunkName: "home" */ './views/Refresh.vue'),
      name: 'Refresh'
    }
  ]
})

二、项目链接

周报管理系统git仓库链接：nodeJs工作周报后台管理系统OA模板

程序员接单_竹立荷塘的博客-CSDN博客