vue-router的二次封装

切图仔

发布于 2022-09-08 16:28:05

7920

发布于 2022-09-08 16:28:05

文章被收录于专栏：生如夏花绚烂

本文介绍对vue-router的二次封装通过对vue-router的二次封装，即可实现通过component自动生成path和name值，不用频繁的进行重复引用如下未封装前

{
    path:'/login',
    name:'login',
    component:()=>import('../../views/login')
    component:'login/index'
},

封装后

{
    component:'login/index'
}

经过封装后代码简化了许多，但功能却一样，这在路由较多时好处非常大接下来我们来封装vue-router 我们要实现的功能

通过component自动生成path,name
当指定了path、name值程序不会自动生成
当component存在index时 path 、name自动屏蔽如 component:login/index对应name值为 login path值为 \login

首先我们在src目录新建配置文件commom/config/router.js 这个配置文件用于声明项目中使用到的路由暂时键入

let routes = [
    {
        path:'/login',
        name:'login',
        component:()=>import('../../views/login')
        component:'login/index'
    },
]

在src目录新键router.js 键入如下

import Vue from 'vue';
import Router from 'vue-router';
import routes from './common/config/router.js'
Vue.use(Router);
export default new Router({
    routes
})

在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')

接下来我们完善commom/config/router.js

1.定义获取路由方法

//获取路由信息
let getRoutes = function(){
    //生成路由详细信息
    createRoute(routes)
    return routes;
}

2.定义生成路由方法

function createRoute(arr){
        for(let i=0;i<arr.length;i++){
            /*没有component的路由 如path='*'*/
            if(!arr[i].component)return
            //去除index
            let value = getValue(arr[i].component)
            //生成name(login/text==login_text)
            arr[i].name = arr[i].name || value.replace(/\//g,'_')    
            //生成path
            arr[i].path = arr[i].path || `/${value}`
            //自动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)
            }

        }
        
    }

3.去除index后缀方法

function getValue(str){
        //获取最后一个‘/’的索引
        let index = str.lastIndexOf('/')
        //获取反斜杠后面的值
        let val = str.substring(index+1,str.length)
        //判断是不是index结尾
        if(val==='index'){
            //login/index == login
            return str.substring(index,-1)
        }else{
            return str;
        }
    }

4.导入routes

export default getRoutes()

接下来我们就可以在通过component自动生成path和name值了

如

let routes = [
        {
            path:'/',
            name:'layout',
            redirect:{name:'index'},
            component:()=>import('../../views/layout.vue'),
            component:'layout',
            children:[
                {
                    component:'index/index'
             /*
                 生成后:
                 path:/index
                 name:index
                 */
                },
                {
                    component:"shop/goods/list"
                    /*
                    生成后:
                    path:/shop/goods/list
                    name:shop_goods_list
                    */
                }
            ]
        },
        {
            component:'login/index'
            /*
            生成后
            path:/login
            name:login
            */
        },
        {
            path:'*',
            redirect:{name:'index'}
        }
    ]

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2020-08-12 ，如有侵权请联系 cloudcommunity@tencent.com 删除

javascript