路由和页面

MapGIS Pan-Spatial Map 使用 vue-router (opens new window) 来配置和管理我们的路由。

路由

MapGIS Pan-Spatial Map 的路由配置完全遵循 vue-router 的 routes 配置规则 (opens new window)。配置示例如下：

// 路由配置
const constantRouterMap = [
  {
    path: '',
    name: '',
    redirect: '/map'
  },
  {
    path: '/user',
    component: UserLayout,
    redirect: '/user/login',
    hidden: true,
    children: [
      {
        path: 'login',
        name: 'login',
        meta: { title: '登录' },
        component: () =>
          import(/* webpackChunkName: "user" */ '@/views/user/Login')
      }
    ]
  },
  {
    path: '/404',
    component: () => import('@/views/exception/404')
  },
  {
    path: '/403',
    component: () => import('@/views/exception/403')
  },
  {
    path: '/map',
    name: 'Map',
    component: () => import('@/views/app/map/index'),
    meta: { title: '地图' }
  },
  {
    path: '/app/*',
    name: 'App',
    component: () => import('@/views/app/microPage/index'),
    meta: { title: '应用' }
  }
]

页面

这里的『页面』包含新建页面文件，配置路由、样式文件等。通常情况下，您仅需简单的配置就可以添加一个新的页面。

默认页面

除了异常页面外，本项目默认提供了登录页面和地图页面，并做好了路由配置。

新建页面文件

在 src/views 下创建新的 .vue 文件。如果页面相关文件过多，您可以创建一个文件夹来放置这些文件。

  ├── public
  ├── src
  │   ├── assets               # 本地静态资源
  :   :
  │   ├── views                # 页面组件和通用模板
+ │   │   └── NewPage.vue      # 新页面文件
or
+ │   │   └── new-page         # 为新页面创建一个文件夹
+ │   │       ├── index.less   # 页面样式文件
+ │   │       └── index.vue    # 新页面文件
  :   :
  │   └── main.js              # 应用入口js
  ├── package.json             # package.json
  :   :
  └── vue.config.js            # vue 配置文件

为了更好地演示，我们初始化 NewPage.vue 文件如下：

<template>
  <div class="new-page" :style="`min-height: ${pageMinHeight}px`">
    <h1>演示页面</h1>
  </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
  name: 'NewPage',
  data() {
    return {
      desc: '这是一个演示页面'
    }
  },
  computed: {
    ...mapState('setting', ['pageMinHeight'])
  }
}
</script>
<style scoped lang="less">
@import 'index.less';
</style>

index.less 文件：

.new-page {
  height: 100%;
  background-color: @base-bg-color;
  text-align: center;
  padding: 200px 0 0 0;
  margin-top: -24px;
  h1 {
    font-size: 48px;
  }
}

index.js 文件：

import NewPage from './NewPage'
export default NewPage

配置路由

路由配置在 src/config/router.config.js 文件中，我们把上面创建的页面文件加入路由配置中

const options = {
  routes: [
    {name: '登录页'...},
    {
      path: '/new-page',
      name: '新页面',
      component: () => import('@/views/new-page/index')
    },
    ...
  ]
}

提示

我们建议使用英文设置路由的 path 属性，用中文设置路由的 name 属性。

启动服务，并跳转/new-page 地址，您将看到新增页面。

如果您想把它配置为二级页面或更深层级的页面，只需为它配置一个父级路由，并为父级路由配置一个视图组件。

注意

页面所有父级路由的组件必须配置为视图组件，否则页面的内容可能不会显示。
本项目没有提供视图组件，当然，您也可以自己创建视图组件。（什么是视图组件？）