前端知识(二)09-前端项目路由配置-谷粒学院

目录

• 一、组件定义
  • 1、创建vue组件
  • 2、form.vue
  • 3、list.vue
• 二、路由定义
• 三、其他
  • 1、项目名称
  • 2、端口号
  • 3、国际化设置
  • 4、入口页面
  • 5、登录页

一、组件定义

1、创建vue组件

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

2、form.vue

<template>
  <div class="app-container">
    讲师表单
  </div>
</template>

3、list.vue

<template>
  <div class="app-container">
    讲师列表
  </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>