应用编程的页面组件

现在，你已经知道了，菜单和路由，你都可以选择动态维护，也完全可以使用常规的编程实现。

如果菜单动态实现，路由编程实现 ———— 你知道只要保持两者的path相对应即可。

但路由动态实现，页面组件编程实现。该如何建立联系呢？

你可以再回去看看前端配置中有一个配置项叫做components。 它的值是一个数组，数组元素是一个Vue组件实例。

比如下面，这个数组:

import Route1_1 from "@/views/Route1_1";
import Route1_2 from "@/views/Route1_2";

const components = [
    Route1_1,
    Route1_2
]

直接将上面这个数组传入到前端配置中的components配置项中，就可以在【路由维护】 模块中的新增或编辑表单里的组件表单项里搜索到Route1_1和Route1_2了。如下图:

相信你已经注意到了, 下拉时选项中的图标和中文名是如何配置的呢？

你只需要在你的页面组件中配置meta属性如下:

export default {
  name: "Route1_1",
  meta: {
    cn: '路由1_1',
    icon: 'el-icon-menu'
  },
  data() {
    return {
    }
  }
}

icon 可以配置 ElementUI图标，或者已注册的SVG文件名。