您现在的位置是:网站首页>>前端技术>>Vue

基于vue的iview框架学习

发布时间:2018-07-26 17:25:14作者:wangjian浏览量:852点赞量:1

    一.iview的安装并运行

    从github获取最新的iView-admin代码: 

    git clone https://github.com/iview/iview-admin.git -b 2.0

    进入项目的根目录安装依赖并运行项目

    npm install
    npm run dev

    二.路由配置

    在iView-admin中,路由配置承担着重要的作用,它影响着如下内容:

    (1)左侧菜单内容

    (2)是否缓存该页

    (3)该页面图标(显示在菜单、面包屑和Tab标签)

    1.不作为Main组件的子页面展示的页面单独写,例如:

    export const loginRouter = {
        path: '/login',
        name: 'login',
        meta: {
            title: 'Login - 登录'
        },
        component: () => import('@/views/login.vue')
    };

    2.作为Main组件的子页面展示但是不在左侧菜单显示的路由写在otherRouter里,例如:

    export const otherRouter = {
        path: '/',
        name: 'otherRouter',
        redirect: '/home',
        component: Main,
        children: [
            { path: 'home', title: '首页', name: 'home_index', component: () => import('@/views/home/home.vue') },
        ]
    };

    3.作为Main组件的子页面展示并且在左侧菜单显示的路由写在appRouter里,例如:

    export const appRouter = [
        {
            path: '/roles',
            icon: 'key',
            name: 'user_manage',
            title: '用户管理',
            component: Main,
            children: [
                {
                    path: 'user_roles',
                    title: '用户权限管理',
                    name: 'user_roles_manage',
                    component: () => import('@/views/main/user/roles/index.vue'),
                },
                {
                    path: 'user_manage',
                    title: '用户列表管理',
                    name: 'user_list_manage',
                    component: () => import('@/views/main/user/user/index.vue'),
                },
            ]
        },
    ];


1 +1