第一步
在 src/views 下新建页面的 vue 文件, 如果相关页面有多个, 可以新建一个文件夹来放置相关文件.
给页面里写几个字, 等会可以看到哦~~
第二步
将文件加入菜单和路由
进入这个文件 src\config\router.config.JS
- // eslint-disable-next-line
- import { UserLayout, BasicLayout, RouteView, BlankLayout, PageView } from '@/layouts'
- import { bxAnaalyse } from '@/core/icons'
- export const asyncRouterMap = [
- {
- path: '/',
- name: 'index',
- component: BasicLayout,
- meta: { title: '首页' },
- redirect: '/dashboard/workplace',
- children: [
- // dashboard
- {
- path: 'dashboard',
- name: 'dashboard',
- redirect: '/dashboard/workplace',
- component: RouteView,
- meta: { title: '仪表盘', keepAlive: true, icon: bxAnaalyse, permission: [ 'dashboard' ] },
- children: [
- {
- path: 'analysis/:pageNo([1-9]\\d*)?',
- name: 'Analysis',
- component: () => import('@/views/dashboard/Analysis'),
- meta: { title: '分析页', keepAlive: false, permission: [ 'dashboard' ] }
- },
- // 外部链接
- {
- path: 'https://www.baidu.com/',
- name: 'Monitor',
- meta: { title: '监控页 (外部)', target: '_blank' }
- },
- {
- path: 'workplace',
- name: 'Workplace',
- component: () => import('@/views/dashboard/Workplace'),
- meta: { title: '工作台', keepAlive: true, permission: [ 'dashboard' ] }
- },
- {
- path: 'test-work',
- name: 'TestWork',
- component: () => import('@/views/dashboard/TestWork'),
- meta: { title: '测试功能', keepAlive: true, permission: [ 'dashboard' ] }
- }
- ]
- },
- // forms
- {
- path: '/form',
- redirect: '/form/base-form',
- component: PageView,
- meta: { title: '表单页', icon: 'form', permission: [ 'form' ] },
- children: [
- {
- path: '/form/base-form',
- name: 'BaseForm',
- component: () => import('@/views/form/BasicForm'),
- meta: { title: '基础表单', keepAlive: true, permission: [ 'form' ] }
- },
- {
- path: '/form/step-form',
- name: 'StepForm',
- component: () => import('@/views/form/stepForm/StepForm'),
- meta: { title: '分步表单', keepAlive: true, permission: [ 'form' ] }
- },
- {
- path: '/form/advanced-form',
- name: 'AdvanceForm',
- component: () => import('@/views/form/advancedForm/AdvancedForm'),
- meta: { title: '高级表单', keepAlive: true, permission: [ 'form' ] }
- }
- ]
- },
- // list
- {
- path: '/list',
- name: 'list',
- component: PageView,
- redirect: '/list/table-list',
- meta: { title: '列表页', icon: 'table', permission: [ 'table' ] },
- children: [
- {
- path: '/list/table-list/:pageNo([1-9]\\d*)?',
- name: 'TableListWrapper',
- hideChildrenInMenu: true, // 强制显示 MenuItem 而不是 SubMenu
- component: () => import('@/views/list/TableList'),
- meta: { title: '查询表格', keepAlive: true, permission: [ 'table' ] }
- },
- {
- path: '/list/basic-list',
- name: 'BasicList',
- component: () => import('@/views/list/StandardList'),
- meta: { title: '标准列表', keepAlive: true, permission: [ 'table' ] }
- },
- {
- path: '/list/card',
- name: 'CardList',
- component: () => import('@/views/list/CardList'),
- meta: { title: '卡片列表', keepAlive: true, permission: [ 'table' ] }
- },
- {
- path: '/list/search',
- name: 'SearchList',
- component: () => import('@/views/list/search/SearchLayout'),
- redirect: '/list/search/article',
- meta: { title: '搜索列表', keepAlive: true, permission: [ 'table' ] },
- children: [
- {
- path: '/list/search/article',
- name: 'SearchArticles',
- component: () => import('../views/list/search/Article'),
- meta: { title: '搜索列表 (文章)', permission: [ 'table' ] }
- },
- {
- path: '/list/search/project',
- name: 'SearchProjects',
- component: () => import('../views/list/search/Projects'),
- meta: { title: '搜索列表 (项目)', permission: [ 'table' ] }
- },
- {
- path: '/list/search/application',
- name: 'SearchApplications',
- component: () => import('../views/list/search/Applications'),
- meta: { title: '搜索列表 (应用)', permission: [ 'table' ] }
- }
- ]
- }
- ]
- },
- // profile
- {
- path: '/profile',
- name: 'profile',
- component: RouteView,
- redirect: '/profile/basic',
- meta: { title: '详情页', icon: 'profile', permission: [ 'profile' ] },
- children: [
- {
- path: '/profile/basic',
- name: 'ProfileBasic',
- component: () => import('@/views/profile/basic/Index'),
- meta: { title: '基础详情页', permission: [ 'profile' ] }
- },
- {
- path: '/profile/advanced',
- name: 'ProfileAdvanced',
- component: () => import('@/views/profile/advanced/Advanced'),
- meta: { title: '高级详情页', permission: [ 'profile' ] }
- }
- ]
- },
- // result
- {
- path: '/result',
- name: 'result',
- component: PageView,
- redirect: '/result/success',
- meta: { title: '结果页', icon: 'check-circle-o', permission: [ 'result' ] },
- children: [
- {
- path: '/result/success',
- name: 'ResultSuccess',
- component: () => import(/* webpackChunkName: "result" */ '@/views/result/Success'),
- meta: { title: '成功', keepAlive: false, hiddenHeaderContent: true, permission: [ 'result' ] }
- },
- {
- path: '/result/fail',
- name: 'ResultFail',
- component: () => import(/* webpackChunkName: "result" */ '@/views/result/Error'),
- meta: { title: '失败', keepAlive: false, hiddenHeaderContent: true, permission: [ 'result' ] }
- }
- ]
- },
- // Exception
- {
- path: '/exception',
- name: 'exception',
- component: RouteView,
- redirect: '/exception/403',
- meta: { title: '异常页', icon: 'warning', permission: [ 'exception' ] },
- children: [
- {
- path: '/exception/403',
- name: 'Exception403',
- component: () => import(/* webpackChunkName: "fail" */ '@/views/exception/403'),
- meta: { title: '403', permission: [ 'exception' ] }
- },
- {
- path: '/exception/404',
- name: 'Exception404',
- component: () => import(/* webpackChunkName: "fail" */ '@/views/exception/404'),
- meta: { title: '404', permission: [ 'exception' ] }
- },
- {
- path: '/exception/500',
- name: 'Exception500',
- component: () => import(/* webpackChunkName: "fail" */ '@/views/exception/500'),
- meta: { title: '500', permission: [ 'exception' ] }
- }
- ]
- },
- // account
- {
- path: '/account',
- component: RouteView,
- redirect: '/account/center',
- name: 'account',
- meta: { title: '个人页', icon: 'user', keepAlive: true, permission: [ 'user' ] },
- children: [
- {
- path: '/account/center',
- name: 'center',
- component: () => import('@/views/account/center/Index'),
- meta: { title: '个人中心', keepAlive: true, permission: [ 'user' ] }
- },
- {
- path: '/account/settings',
- name: 'settings',
- component: () => import('@/views/account/settings/Index'),
- meta: { title: '个人设置', hideHeader: true, permission: [ 'user' ] },
- redirect: '/account/settings/base',
- hideChildrenInMenu: true,
- children: [
- {
- path: '/account/settings/base',
- name: 'BaseSettings',
- component: () => import('@/views/account/settings/BaseSetting'),
- meta: { title: '基本设置', hidden: true, permission: [ 'user' ] }
- },
- {
- path: '/account/settings/security',
- name: 'SecuritySettings',
- component: () => import('@/views/account/settings/Security'),
- meta: { title: '安全设置', hidden: true, keepAlive: true, permission: [ 'user' ] }
- },
- {
- path: '/account/settings/custom',
- name: 'CustomSettings',
- component: () => import('@/views/account/settings/Custom'),
- meta: { title: '个性化设置', hidden: true, keepAlive: true, permission: [ 'user' ] }
- },
- {
- path: '/account/settings/binding',
- name: 'BindingSettings',
- component: () => import('@/views/account/settings/Binding'),
- meta: { title: '账户绑定', hidden: true, keepAlive: true, permission: [ 'user' ] }
- },
- {
- path: '/account/settings/notification',
- name: 'NotificationSettings',
- component: () => import('@/views/account/settings/Notification'),
- meta: { title: '新消息通知', hidden: true, keepAlive: true, permission: [ 'user' ] }
- }
- ]
- }
- ]
- },
- // other
- {
- path: '/other',
- name: 'otherPage',
- component: PageView,
- meta: { title: '其他组件', icon: 'slack', permission: [ 'dashboard' ] },
- redirect: '/other/icon-selector',
- children: [
- {
- path: '/other/icon-selector',
- name: 'TestIconSelect',
- component: () => import('@/views/other/IconSelectorView'),
- meta: { title: 'IconSelector', icon: 'tool', keepAlive: true, permission: [ 'dashboard' ] }
- },
- {
- path: '/other/list',
- component: RouteView,
- meta: { title: '业务布局', icon: 'layout', permission: [ 'support' ] },
- redirect: '/other/list/tree-list',
- children: [
- {
- path: '/other/list/tree-list',
- name: 'TreeList',
- component: () => import('@/views/other/TreeList'),
- meta: { title: '树目录表格', keepAlive: true }
- },
- {
- path: '/other/list/edit-table',
- name: 'EditList',
- component: () => import('@/views/other/TableInnerEditList'),
- meta: { title: '内联编辑表格', keepAlive: true }
- },
- {
- path: '/other/list/user-list',
- name: 'UserList',
- component: () => import('@/views/other/UserList'),
- meta: { title: '用户列表', keepAlive: true }
- },
- {
- path: '/other/list/role-list',
- name: 'RoleList',
- component: () => import('@/views/other/RoleList'),
- meta: { title: '角色列表', keepAlive: true }
- },
- {
- path: '/other/list/system-role',
- name: 'SystemRole',
- component: () => import('@/views/role/RoleList'),
- meta: { title: '角色列表 2', keepAlive: true }
- },
- {
- path: '/other/list/permission-list',
- name: 'PermissionList',
- component: () => import('@/views/other/PermissionList'),
- meta: { title: '权限列表', keepAlive: true }
- }
- ]
- }
- ]
- },
- // new path
- {
- path: '/particle',
- name: 'particlePage',
- component: RouteView,
- meta: { title: '测试页面组件', icon: 'slack', permission: [ 'dashboard' ] },
- redirect: '/particle/list',
- children: [
- {
- path: '/particle/list',
- name: 'particlePage',
- component: () => import('@/views/particle-monitoring/particleList'),
- meta: { title: '测试页面组件頁', icon: 'tool', keepAlive: true, permission: [ 'dashboard' ] }
- }
- ]
- }
- ]
- },
- {
- path: '*', redirect: '/404', hidden: true
- }
- ]
- /**
- * 基础路由
- * @type { *[] }
- */
- export const constantRouterMap = [
- {
- path: '/user',
- component: UserLayout,
- redirect: '/user/login',
- hidden: true,
- children: [
- {
- path: 'login',
- name: 'login',
- component: () => import(/* webpackChunkName: "user" */ '@/views/user/Login')
- },
- {
- path: 'register',
- name: 'register',
- component: () => import(/* webpackChunkName: "user" */ '@/views/user/Register')
- },
- {
- path: 'register-result',
- name: 'registerResult',
- component: () => import(/* webpackChunkName: "user" */ '@/views/user/RegisterResult')
- },
- {
- path: 'recover',
- name: 'recover',
- component: undefined
- }
- ]
- },
- {
- path: '/test',
- component: BlankLayout,
- redirect: '/test/home',
- children: [
- {
- path: 'home',
- name: 'TestHome',
- component: () => import('@/views/Home')
- }
- ]
- },
- {
- path: '/404',
- component: () => import(/* webpackChunkName: "fail" */ '@/views/exception/404')
- }
- // 寫到這裡的話, 就是整個頁面覆蓋掉原有的頁面了, 沒有左側列表哦
- // ,
- // {
- // path: '/particle',
- // component: BlankLayout,
- // redirect: '/particle/list',
- // children: [
- // {
- // path: 'list',
- // name: 'particlePage',
- // component: () => import('@/views/particle-monitoring/particleList')
- // }
- // ]
- // }
- ]
然后你就可以看到组件页面了
组件页面使用面包屑 方法如下
- <template>
- <page-view :title="title">
- <div>
- <h1>hahahaha</h1>
- <a-table :columns="columns" :dataSource="data" bordered>
- <template slot="name" slot-scope="text">
- <a href="javascript:;">{{ text }}</a>
- </template>
- </a-table>
- </div>
- </page-view>
- </template>
- <script>
- import { PageView } from '@/layouts'
- // In the fifth row, other columns are merged into first column
- // by setting it's colSpan to be 0
- const renderContent = (value, row, index) => {
- const obj = {
- children: value,
- attrs: {}
- }
- if (index === 4) {
- obj.attrs.colSpan = 0
- }
- return obj
- }
- const data = [
- {
- key: '1',
- name: 'John Brown',
- age: 32,
- tel: '0571-22098909',
- phone: 18889898989,
- address: 'New York No. 1 Lake Park'
- },
- {
- key: '2',
- name: 'Jim Green',
- tel: '0571-22098333',
- phone: 18889898888,
- age: 42,
- address: 'London No. 1 Lake Park'
- },
- {
- key: '3',
- name: 'Joe Black',
- age: 32,
- tel: '0575-22098909',
- phone: 18900010002,
- address: 'Sidney No. 1 Lake Park'
- },
- {
- key: '4',
- name: 'Jim Red',
- age: 18,
- tel: '0575-22098909',
- phone: 18900010002,
- address: 'London No. 2 Lake Park'
- },
- {
- key: '5',
- name: 'Jake White',
- age: 18,
- tel: '0575-22098909',
- phone: 18900010002,
- address: 'Dublin No. 2 Lake Park'
- }
- ]
- export default {
- name: 'particleList',
- components: {
- PageView
- },
- data () {
- const columns = [
- {
- title: 'Name',
- dataIndex: 'name',
- customRender: (text, row, index) => {
- if (index <4) {
- return <a href="javascript:;">{text}</a>
- }
- return {
- children: <a href="javascript:;">{text}</a>,
- attrs: {
- colSpan: 5
- }
- }
- }
- },
- {
- title: 'Age',
- dataIndex: 'age',
- customRender: renderContent
- },
- {
- title: 'Home phone',
- colSpan: 2,
- dataIndex: 'tel',
- customRender: (value, row, index) => {
- const obj = {
- children: value,
- attrs: {}
- }
- if (index === 2) {
- obj.attrs.rowSpan = 2
- }
- // These two are merged into above cell
- if (index === 3) {
- obj.attrs.rowSpan = 0
- }
- if (index === 4) {
- obj.attrs.colSpan = 0
- }
- return obj
- }
- },
- {
- title: 'Phone',
- colSpan: 0,
- dataIndex: 'phone',
- customRender: renderContent
- },
- {
- title: 'Address',
- dataIndex: 'address',
- customRender: renderContent
- }
- ]
- return {
- data,
- columns
- }
- }
- }
- </script>
ok 完毕~~~~
来源: http://www.bubuko.com/infodetail-3460430.html