element-ui后台管理系统学习(2)-vue-router安装、使用与二次封装

痛定思痛。 2021-08-02 20:31 251阅读 0赞

## vue-router安装 ##

### 第1步、安装 ###

npm install vue-router --save

--------------------

### 第2步、创建src/router.js ###

import Vue from 'vue'
    import Router from 'vue-router'
    
    Vue.use(Router)
    
    export default new Router({ 
        routes:[]
    })

--------------------

### 第3步、在main.js中引入router.js ###

import Vue from 'vue'
    import App from './App.vue'
    import './plugins/element.js'
    import router from "./router.js"; //添加部分
    
    Vue.config.productionTip = false
    
    new Vue({ 
      router, //添加部分
      render: h => h(App),
    }).$mount('#app')

--------------------

## vue-router使用 ##

### 在router.js文件中配置路由 ###

import Vue from 'vue'
    import Router from 'vue-router'
    import layout from './views/layout.vue'
    
    Vue.use(Router)
    
    export default new Router({ 
        routes: [
            { 
                path: '/',
                name: 'layout',
                component: layout,
                children: [
                    { 
                        path: '/index',
                        name: 'index',
                        component: () => import('./views/index/index.vue'),
                    }
                ]
            },
            { 
                path: '/login',
                name: 'login',
                component: () => import('./views/login/index.vue')
            }
        ]
    })

备注：为了显示主布局**layout**的子路由，需要配置父子路由，并且在layout使用router-view  
标签实现路由切换。

--------------------

## vue-router二次封装 ##

### 第1步、routes的抽离 ###

新建src/common/config/router.js

let routes = [
        { 
            path: '/',
            name: 'layout',
            component: () => import('../../views/layout.vue'),
            children: [
                { 
                    path: '/index',
                    name: 'index',
                    component: () => import('../../views/index/index.vue'),
                }
            ]
        },
        { 
            path: '/login',
            name: 'login',
            component: () => import('../../views/login/index.vue')
        }
    ];
    
    export default routes

备注：抽离出来**routes**是为了方便管理，新建**src/common/config/router.js**文件，定义**routes**，**export default routes**导出，之后在**router.js**文件中引入即可。

--------------------

### 第2步、路由重定向 ###

{ 
            path: '/',
            name: 'layout',
            redirect: { 
                name:'index'
            },
            component: () => import('../../views/layout.vue'),
            children: [
                { 
                    path: '/index',
                    name: 'index',
                    component: () => import('../../views/index/index.vue'),
                }
            ]
        },
        // 路由重定向(在路由错误的时候)
        { 
            path: '*',
            redirect:{ name:'index'}
        }

### 第3步、自动生成路由，简化路由写法 ###

// 获取路由信息方法
    let getRoutes = function () { 
        // 自动生成路由
        createRoute(routes)
        return routes;
    };
    
    function createRoute(arr) { 
        for (let i = 0; i < arr.length; i++) { 
            if (!arr[i].component) return;
            // 自动生成component
            let componentFun = import(`../../views/${ arr[i].component}.vue`)
            arr[i].component = ()=>componentFun;
            if(arr[i].children && arr[i].children.length > 0){ 
                createRoute(arr[i].children)
            }
        }
    }

这样，component就可以简化为**component: ‘login/index’**，这种形式了。

--------------------

### 第4步，自动生成name、path ###

备注：**getRoutes**是最终的获取路由的方法，导出的时候，需要调用**export default getRoutes()**。

--------------------