vue - 项目之路由封装

最新推荐文章于 2024-07-21 00:03:27 发布

紫菀檀ss

最新推荐文章于 2024-07-21 00:03:27 发布

阅读量3.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/LiaoFengJi/article/details/95180582

vue 专栏收录该内容

41 篇文章

订阅专栏

博客主要介绍了两方面内容，一是封装路由代码块，涉及LazyRouter文件；二是在vue项目的router下的index.js文件中进行相关编写。聚焦于vue项目中路由代码的处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、封装的路由代码块（LazyRouter文件）

    const lazyRouter={
        routes:[],
        add(route,name,meta,viewpath){
            this.routes.push({
                path:route,
                name:name,
                meta:meta,
                component:viewpath,
            });
        }
    }
    export default lazyRouter;

2、在vue项目中的router下面的index.js文件中写

import Vue from 'vue'
import Router from 'vue-router'
//	引入文件封装所在的位置
import lazyRouter from '../libs/LazyRouter';

// 页面路由
import Tabshopnewsfrom '../../managerpages/information/tabshopnews'

lazyRouter.add('/tabshopnews','tabshopnews','栏目',Tabshopnewsfrom );

//	将lazyRouter对象下面的routes暴露出去
Vue.use(Router);
export default new Router({
    routes:lazyRouter.routes
})

目录文件：
在这里插入图片描述