vue - 项目之路由封装

墨蓝 2021-09-29 09:36 476阅读 0赞

#### 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
    })

目录文件：  
   ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xpYW9GZW5nSmk_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xpYW9GZW5nSmk_size_16_color_FFFFFF_t_70]: /images/20210812/d45616a760734f97aadbd87c32cf2b80.png

发表评论取消回复

表情：

评论列表（有 0 条评论，476人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue项目-路由demo

创建项目 [前端项目准备（使用vue脚手架创建）][vue] 项目准备删除不要的组件删除views文件夹删除compoents目录下的所有

绝地灬酷狼/ 2023年07月07日 15:00/ 0 赞/ 106 阅读

相关 vue项目路由权鉴（单个路由）

beforeEnter(to,from,next){ if(sessionStorage.getItem("token")){

妖狐艹你老母/ 2023年01月07日 14:25/ 0 赞/ 128 阅读

相关 VUE_vue动态路由，引入所有路由，vue路由模块化

require.context 主要使用require.context实现前端工程化动他引入文件 require.context(directory, useSubdir

蔚落/ 2022年11月04日 00:52/ 0 赞/ 293 阅读

相关 vue 路由、嵌套路由、动态路由

简介路由就是一套映射规则，当url中的哈希值（\hash）改变时，路由会根据制定好的规则，展示对应的视图组件。 vue中的路由路径分为：相对路径（不带 ‘/’，会拼接

朴灿烈づ我的快乐病毒、/ 2022年10月29日 13:28/ 0 赞/ 430 阅读

相关 Vue之子路由配置

新建两个组件： about1.vue <template> <div> { {msg}} </

素颜马尾好姑娘i/ 2022年04月18日 04:08/ 0 赞/ 255 阅读

相关 Vue之路由

默认的配置文件为router.js import Vue from 'vue' import Router from 'vue-router' imp

小灰灰/ 2022年04月18日 00:10/ 0 赞/ 222 阅读

相关 Vue之路由跳转

所谓的router就是动态的往根里面挂载组件，而不是手动挂载。 vue路由配置的步骤： https://router.vuejs.org/ 1.安

亦凉/ 2022年03月17日 05:17/ 0 赞/ 367 阅读

相关 Vue之路由的嵌套

路由的嵌套在我的理解看来就是一个父路由里包含一个或多个子路由，实现其实很简单，重要的代码也就只有几行。下面我做的这个小例子就很容易理解。 ![在这里插入图片描述][water

柔光的暖阳◎/ 2022年03月16日 07:30/ 0 赞/ 222 阅读

相关 Vue之路由

Vue之路由 1. \\后端路由：\\对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源； 2. \\前端路由：\\对于单页面应用程

忘是亡心i/ 2021年11月22日 21:58/ 0 赞/ 306 阅读

相关 vue - 项目之路由封装

1、封装的路由代码块（LazyRouter文件） const lazyRouter={ routes:[], ad

墨蓝/ 2021年09月29日 09:36/ 0 赞/ 477 阅读