初次使用vue-admin-template后台管理系统模板（三）----路由的搭建

如果没有路由的话，是不能实现跳转的。

import Vue from 'vue'  //引入vue
import Router from 'vue-router'  //引入vue-router

Vue.use(Router)  //注册vue-router

export const constantRoutes = [
  { //一级路由
    path: '/login',
    component: () => import('@/views/login/index'),  //懒加载
    hidden: true
  },
  { //一级路由
    path: '/404',
    component: () => import('@/views/404'),
    hidden: true
  },
  {
    path: '/',
    component: Layout,
    redirect: '/dashboard',  //重定向
    children: [{  //二级路由
      path: 'dashboard',
      name: 'Dashboard',
      component: () => import('@/views/dashboard/index'),  //懒加载
      meta: {title:'Dashboard', icon:'dashboard'}  
      //路由元信息（meta）：
      // roles: ['admin','editor']控制页面角色/权限；
      // title：侧边栏和面包屑中显示的名称；
      // icon：侧边栏中显示的图标；
      // breadcrumb：设置为false时，不会再面包屑中出现；
      // activeMenu：如果设置了路径，侧边栏将突出显示设置的路径。
    }]
  },
  
  ......，//其他路由配置
   {
    path: 'external-link',
    component: Layout, //view们的路由
    children: [
      {
        path: 'https://panjiachen.github.io/vue-element-admin-site/#/',
        meta: { title: 'External Link', icon: 'link' }
      }
    ]
  }, 
    // 访问错误路径重定向404页面的配置必须写在最后!!!
  { 
    path: '*', 
    redirect: '/404',
    hidden: true
  }
]

有了路由配置之后，配置中用到的组件必须存在，否则会报错。