奔三路 - 你30岁前的学习路!

奔三路学习网

当前位置: 主页 > vue面试通 > iview框架 >

iview-admin使用教程之路由配置

时间:2017-11-29 18:18来源:未知 作者:admin
成功运行iview-admin之后,您就可以开始动手修改它,将自己的内容替换进去了。 首先最基础也是最重要的,应该说是路由配置,路由配置里目前有三种类型的配置,对应三种页面的展示

一、iview-admin 菜单怎么使用?

它使用的是iview的Menu导航菜单组件,在 src\views\main-components\shrinkable-menu\components\sidebarMenu.vue 文件里。

MenuItem放没有二级内容的菜单

Submenu放有二级内容的菜单,二级菜单写在MenuItem中。

Menu导航菜单组件有如下特性:


设置 active-name 可以选中指定的菜单,设置 open-names 可以展开指定的子菜单。

设置属性 accordion 可以开启手风琴模式,每次只能展开一个子菜单。

通过设置属性 themelightdark 可以选择主题,侧栏菜单不支持 primary 主题。


菜单的数据内容在 src\router\router.js 文件的 appRouter里

export const appRouter = [
    {
        path: '/access',
        icon: 'key',
        name: 'access',
        title: '权限管理',
        component: Main,
        children: [
            { path: 'index', title: '权限管理', name: 'access_index', component: resolve => { require(['@/views/access/access.vue'], resolve); } }
        ]
    },
    {
        path: '/access-test',
        icon: 'lock-combination',
        title: '权限测试页',
        name: 'accesstest',
...........



二、iview-admin路由配置的三种类型

src\router\router.js

1. 第一种类型:该页面在整个浏览器区域展现,代表性的有登录页、404页等

export const loginRouter = {
    path: '/login',  //必填
    name: 'login',  // 必填,页面都以name值来加载
    meta: {
        title: 'Login - 登录'  // 非必填,若不填默认显示iview-admin(后面会介绍在哪修改默认显示的值)
    },
    component: resolve => { require(['./views/login.vue'], resolve); }  // 必填,用来加载该路由规则对应的视图,resolve用来控制异步加载
};

2.第二种类型:该页面在Main组件的子页面区域展示,但不在左侧菜单栏显示,代表性的有首页、消息中心等

export const otherRouter = {
    path: '/',  // 必填
    name: 'otherRouter',  // 必填,在面包屑处理中需要用到,值固定为otherRouter(或者可以在./src/libs/util.js中修改)
    redirect: '/home',  // 选填,这里如果不填在浏览器地址栏输入域名后自动跳转到首页
    component: Main,  // 必填,主组件,用于加载侧边栏和右侧面包屑、标签栏、工具条、子页面路由视图等
    children: [  // 在Main右侧视图显示的页面都要作为otherRouter的children来添加
        {  // home页面
            path: 'home',  // 必填,在地址栏将以 '域名/home'的的形式呈现
            title: '首页', // 必填,这个title会在标签栏显示
            name: 'home_index',  // 必填,该页面是通过name值来加载的,切记每个路由对象的名字都要和其他的不一样
            component: resolve => { require(['./views/home/home.vue'], resolve); }   // 必填
        }
    ]
};

3.第三种类型:该页面子昂Main组件的子页面区域展示,且在左侧菜单栏显示,对应有两种情况

export const appRouter = [
    {  // a.第一种情况:只有一级菜单
        path: '/access',  // 必填
        redirect: '/access/index',  // 选填,如果不填也会跳转到这个路径
        icon: 'key',  // 必填,此icon将显示在左侧菜单栏
        name: 'access',  // 必填
        title: '权限管理',  // 必填,此title值将显示在左侧菜单栏
        component: Main,  // 必填,且固定,用于加载Main组件
        children: [  // 要显示在右侧区域的页面必须作为children来添加
            { 
                path: 'index',  // 必填
                title: '权限管理',  // 必填,将显示在标签栏对应标签
                name: 'access_index',  // 必填,且不能和其父路由的name不一致(与其他任何路由的name值都不能一致)
                component: resolve => { require(['./views/access/access.vue'], resolve); }   // 必填
            }
        ]
    },
    {  // b.第二种情况:有二级菜单
        path: '/component',  // 必填
        redirect: '/component/text-editor',  // 选填,如果不填在地址栏输入'域名/access'时将默认打开此一级菜单对应的第一个二级菜单页面
        icon: 'social-buffer',  // 必填,同上
        name: 'component',  // 必填,同上
        title: '组件',  // 必填,同上
        component: Main,  // 必填,同上
        children: [  // 必填,同上
            {
                path: 'text-editor',  // 必填,同上
                icon: 'compose',  // 必填,同上
                name: 'text-editor',  // 必填,同上
                title: '富文本编辑器',  // 必填,将显示在左侧菜单栏二级菜单
                component: resolve => { require(['./views/my_components/text-editor/text-editor.vue'], resolve); }  // 必填
            },
            {
                path: 'md-editor',  // 必填,同上
                icon: 'pound',  // 必填,同上
                name: 'md-editor',  // 必填,同上
                title: 'Markdown编辑器',  // 必填,同上
                component: resolve => { require(['./views/my_components/markdown-editor/markdown-editor.vue'], resolve); }
            },  // 必填
        ]
    }
}

您还可以为页面配置权限,在左侧菜单初始化的时候,会通过当前登录用户的权限值来过滤路由配置,从而决定在左侧菜单栏显示哪些选项。权限配置很简单,只需在路由对象里设置'access'属性即可:

    {
        path: '/access-test',
        icon: 'lock-combination',
        title: '权限测试页',
        name: 'accesstest',
        access: 0,  // 如果设置access值,那么当登录用户的权限值不为0时则该菜单及其二级菜单都不会出现在左侧菜单栏;
                    // 如果不设置access值,那么该菜单默认显示;
                    // access如果只有一个权限值过滤,那么直接写一个数字即可(如这的0),如果有多个,则写成数组类型(如[0,1])。
        component: Main,
        children: [
            { path: 'index', title: '权限测试页', name: 'accesstest_index' }
        ]
    },
(责任编辑:admin)
顶一下
(6)
54.5%
踩一下
(5)
45.5%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片