实际前端项目路由配置

一 组件定义

1 创建vue组件

在src/views文件夹下创建以下文件夹和文件

2 form.vue

<template>
  <div class="app-container">
    <h1>讲师管理</h1>
    <p>讲师表单</p>
  </div>
</template>

3 list.vue

<template>
  <div class="app-container">
    <h1>讲师管理</h1>
    <p>讲师列表</p>
  </div>
</template>

二 路由定义

修改 src/router/index.js 文件，重新定义constantRouterMap

注意：每个路由的name不能相同

export const constantRouterMap = [
  { path: '/login', component: () => import('@/views/login/index'), hidden: true },
  { path: '/404', component: () => import('@/views/404'), hidden: true },


  {
    path: '/',
    component: Layout,
    redirect: '/dashboard',
    name: 'Dashboard',
    hidden: true,
    children: [{
      path: 'dashboard',
      component: () => import('@/views/dashboard/index')
    }]
  },


  // 讲师管理
  {
    path: '/teacher',
    component: Layout,
    redirect: '/teacher/list',
    name: 'Teacher',
    meta: { title: '讲师管理' },
    children: [
      {
        path: 'list',
        name: 'TeacherList',
        component: () => import('@/views/teacher/list'),
        meta: { title: '讲师列表' }
      },
      {
        path: 'create',
        name: 'TeacherCreate',
        component: () => import('@/views/teacher/form'),
        meta: { title: '添加讲师' }
      },
      {
        path: 'edit/:id',
        name: 'TeacherEdit',
        component: () => import('@/views/teacher/form'),
        meta: { title: '编辑讲师' },
        hidden: true
      }
    ]
  },


  { path: '*', redirect: '/404', hidden: true }
]

三 项目其他配置

1 项目名称

将 vue-admin-template-master 重命名为 guli_admin

2 端口号

在 config/index.js中修改

port: 9528,

3 国际化设置

src/main.js，第7行，修改语言为 zh-CN，使用中文语言环境，例如：日期时间组件

import locale from 'element-ui/lib/locale/lang/zh-CN' // lang i18n

4 入口页面

index.html

<title>谷粒学院后台管理系统</title>

5 登录页

src/views/login/index.vue，第4行

<h3 class="title">谷粒学院后台管理系统</h3>

四 测试