实际前端项目路由配置

短命女 2021-07-24 17:34 340阅读 0赞

# 一 组件定义 #

## 1 创建vue组件 ##

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

![20201122201152301.png][]

2 form.vue

3 list.vue

# 二 路由定义 #

修改 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>

# 四 测试 #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70][]

[20201122201152301.png]: /images/20210724/0e751e3e5212438cae2454cc6bf21568.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70]: /images/20210724/7dd2733591ba44adbc16aa8be6172476.png