新增页面

新增页面非常简单，无需配置 Vue Router。

首先在 @src/views 文件夹下新建一个页面文件夹，接着在该文件夹下新建一个 index.vue 文件。

如：新增一个 home 页面。

# ···
├── src
│   └── views
│       └── home
│           └── index.vue
# ···

index.vue

vue

<template>
  <div>home</div>
</template>

然后在 @src/config.js 文件的 menu 菜单项配置中添加一个对应的菜单项即可，下边是参考配置:

const MENU_KEYS = {
  // ...
  HOME: 'home',
};

const menu = [
  // ...
  {
    key: MENU_KEYS.HOME,
    title: '首页',
    path: '/home',
    meta: {
      icon: 'ic-icon-baseline-insert-emoticon', // 图标
      layout: 'main', // 布局
      component: 'home', // 页面对应的组件
    },
  },
  // ...
];

key 可以根据自己的情况而定，项目本身默认是使用常量定义，不喜欢用常量可以自己改成字符串。

注意

key 不能重复。

title 是左侧菜单的显示的名称。

path 是对应的路由路径。

注意

path 不能重复。

meta 是额外的配置，可进行扩展，下面是默认配置的类型：

注意

除了内置的字段，你可以在这里添加你自己的字段。

{
  icon?: string,       // iconsList 中配置的图标/自定义图标名称
  layout?: string,     // 使用的布局，可自行调整映射
  component?: string,  // 页面对应的组件，即 `@src/views` 文件夹下的文件名
  iframeSrc?: string,  // iframe 的地址
  outlink?: string,    // 外部链接的地址，直接打开新标签
}

使用 iframeSrc 配置，component 必须设置为 iframe。

使用 outlink 配置时，其他配置都可以不用设置。

根据上述步骤完成后，就可以在左侧菜单中看到新增的菜单项了，点击菜单项后会跳转到对应的页面。

页面配置示例

普通页面：

key、title、path、meta.layout、meta.component 都是必须的。

{
  key: MENU_KEYS.HOME,
  title: '首页',
  path: '/home',
  meta: {
    icon: 'ic-icon-baseline-insert-emoticon',
    layout: 'main',
    component: 'home',
  },
}

Iframe 页面:

key、title、path、meta.layout、meta.component、meta.iframeSrc 都是必须的，且 meta.component 必须设置为 iframe。

{
  key: 'iframe',
  title: 'Iframe 页面',
  path: '/iframe-path',
  meta: {
    icon: 'ic-icon-baseline-insert-emoticon',
    layout: 'main',
    component: 'iframe',
    iframeSrc: 'https://www.baidu.com',
  },
}

外部链接:

key、title、meta.outlink 都是必须的，不需要配置 path 。

{
  key: 'outlink',
  title: '外部链接',
  meta: {
    icon: 'ic-icon-baseline-insert-emoticon',
    outlink: 'https://www.baidu.com',
  },
}

贡献者

SaltedFish964

页面历史

最后编辑于 3 天前

查看完整历史

新增页面 ​

页面配置示例 ​

贡献者

页面历史

新增页面

页面配置示例