element-ui後臺管理系統學習(2)-vue-router安裝、使用與二次封裝

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

let routes = [
    {
        path: '/',
        name: 'layout',
        redirect: {
            name: 'index'
        },
        component: 'layout',
        children: [
            {
                path: '/index',
                name: 'index',
                component: 'index/index',
            },
            {
                component: 'shop/goods/list',
            }
        ]
    },
    // 登錄
    {
        path: '/login',
        name: 'login',
        component: 'login/index',
    },
    // 路由重定向
    {
        path: '*',
        redirect: { name: 'index' }
    }
];

// 獲取路由信息方法
let getRoutes = function () {
    // 自動生成路由
    createRoute(routes)
    console.log(routes,'11111111')
    return routes;
};

function createRoute(arr) {
    for (let i = 0; i < arr.length; i++) {
        if (!arr[i].component) return;
        //除去結尾的index
        let val = getValue(arr[i].component);
        // 自動生成name
        arr[i].name = arr[i].name || val.replace(/\//g,'_')
        // 自動生成path
        arr[i].path = arr[i].path || `/${val}`
        // 自動生成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)
        }
    }
}

// 除去index
function getValue(str) {
    // 獲取最後一個/的索引
    let index = str.lastIndexOf('/');
    // 獲取最後一個/後面的值
    let val = str.substring(index + 1, str.length);
    // 判斷是不是index結尾
    if (val === 'index') {
        return str.substring(index, -1)
    }
    return str
}

export default getRoutes()

備註：getRoutes是最終的獲取路由的方法，導出的時候，需要調用export default getRoutes()。

---