vue - 项目之路由封装

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

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

  1. const lazyRouter={
  2.         routes:[],
  3.         add(route,name,meta,viewpath){
  4.             this.routes.push({
  5.                 path:route,
  6.                 name:name,
  7.                 meta:meta,
  8.                 component:viewpath,
  9.             });
  10.         }
  11.     }
  12.     export default lazyRouter;

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

  1. import Vue from 'vue'
  2. import Router from 'vue-router'
  3. //    引入文件封装所在的位置
  4. import lazyRouter from '../libs/LazyRouter';
  6. // 页面路由
  7. import Tabshopnewsfrom '../../managerpages/information/tabshopnews'
  9. lazyRouter.add('/tabshopnews','tabshopnews','栏目',Tabshopnewsfrom );
  11. //    将lazyRouter对象下面的routes暴露出去
  12. Vue.use(Router);
  13. export default new Router({
  14.     routes:lazyRouter.routes
  15. })

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

发表评论

表情：
评论列表 （有 0 条评论，547人围观）

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

相关阅读

    相关 Vue之路由跳转

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

    亦凉亦凉/ 0 赞/ 431 阅读

    相关 Vue之路由的嵌套

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

    柔光的暖阳◎柔光的暖阳◎/ 0 赞/ 286 阅读

    相关 Vue之路由

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

    忘是亡心i忘是亡心i/ 0 赞/ 382 阅读