Router_EN

Configuration of router

  After successfully running iview-admin, you can start to modify it and replace your own content. First of all, the most basic and most important, it should be said that the routing configuration, there are currently three types of routing configuration configuration, corresponding to three types of page display. Just look at the code:

./src/router.js

1. The first type: This page is displayed in the visual area of browser, for example, login page and 404 pages.

export const loginRouter = {
    path: '/login', // Required
    name: 'login', // Required, pages are loaded with name value
    meta: {
        title: 'Login' // not required, it will show 'iview-admin' if you do not set title (we will introduce where to modify the defaul value)
    },
    component: resolve => {require (['./views/login.vue'], resolve);}  // Required, to load the corresponding view of the router rules, 'resolve' used to control asynchronous loading
};

2. The second type: This page is displayed in the sub-page area of ​​the Main component, but not show it's title in left menu, just like home page, login page.

export const otherRouter = {
    path: '/', // Required
    name: 'otherRouter', // Mandatory, and you must write 'otherRouter' at here, because it will be used in breadcrumbs (unless you change it in './src/libs/util.js')
    redirect: '/home', // ​​not required, if you do not set this propers, it will turn to home page when you input domain name in address bar.
    component: Main, // Required, main component for loading sidebar and right breadcrumbs, tab bar, toolbar, sub-page router view.
    children: [ // The page shown in the Main right-hand view is added as children of otherRouter
        { // home page
            path: 'home', // Required, in the address bar will show as 'domain/home'
            title: 'Home', // Required, the title will be displayed in the tab bar
            name: 'home_index', // ​​Required, the page is loaded by the name value
            component: resolve => {require (['./views/home/home.vue'], resolve);
        }
    ]
};

3. The third type: The page will show in Main component's sub-page area, and show title in the left men, there are two corresponding cases

export const appRouter = [
    { // a. The first case: level 1 menu
        path: '/access', // Required
        redirect: '/access/index', // not required, if you do not fill will also jump to this path
        icon: 'key', // Required, this icon will be displayed in the left menu bar
        name: 'access', // Required
        title: 'Access management', // ​​Required, this value will show at left menu
        component: Main, // Required, it must be 'Main', used to load the Main component
        children: [ // The page to display in the right area must be added as children
            {
                path: 'index', // Required
                title: 'Rights Management', // Required, will be displayed in the tag navigation corresponding label
                name: 'access_index', // Required and can not be same with the name of its parent route (it can not be the same as the name of any other route)
                component: resolve => {require (['./views/access/access.vue'], resolve);
            }
        ]
    },
    { // b. The second case: level 2 menu
        path: '/component', // Required
        redirect: '/component/text-editor', // not required, if you do not fill, it will turn to the first level 2 page of parent menu of this level, when you input 'domain name/access' in the adress bar.
        icon: 'social-buffer', // Required, same as above
        name: 'component', // Required, same as above
        title: 'Component', // Required, same as above
        component: Main, // Required, same as above
        children: [// Required, same as above
            {
                path: 'text-editor', // Required, same as above
                icon: 'compose', // Required, same as above
                name: 'text-editor', // Required, same as above
                title: 'Rich Text Editor', // Required, will be showed at left menu
                component: resolve => {require (['./ views / my_components / text-editor / text-editor.vue'], resolve);
            },
            {
                path: 'md-editor', // Required, same as above
                icon: 'pound', // Required, same as above
                name: 'md-editor', // Required, same as above
                title: 'Markdown Editor', // required, same as above
                component: resolve => {require (['./ views / my_components / markdown-editor / markdown-editor.vue'], resolve);}
            }, // Required
        ]
    }
}

You can also configure the access on the page. When the left menu is initialized, the router configuration is filtered by the permission value of the currently logged in user to determine which options are displayed in the left menu bar. Permission configuration is very simple, just set the 'access' property in the routing object:

    {
        path: '/ access-test',
        icon: 'lock-combination',
        title: 'permission test page',
        name: 'accesstest',
        access: 0, // If you set the access value, then when the login user's permission value is not 0, the menu and its second-level menu will not appear in the left menu bar;
                    // If you do not set the access value, then the menu is displayed by default;
                    // access If there is only one permission value filter, then write a number directly (such as this 0), if there is more than one, then write as an array (such as [0,1]).
        component: Main,
        children: [
            {path: 'index', title: 'permission test page', name: 'accesstest_index'}
        ]
    },