vue项目根据配置控制路由

矫情吗；* 2022-12-26 09:29 109阅读 0赞

### 一、需求背景 ###

在当前项目（叫Parent项目，简称P项目）中抽离一个精简版项目（Child项目，简称C项目），用作其他用途。隐藏P项目的所有logo和名称，增加部分页面如登录页面等。

### 二、实现思路 ###

1.拷贝一份P项目通过删减和增加特定页面来生成一个全新的项目，在新的项目上进行维护。

优点：项目独立不会冗余过多的权限控制和兼容代码

缺点：相同需求变更需要维护两套代码，增加工作量

2.根据一个配置开判断项目类型是P还是C，根据权限来控制路由，实现一套代码维护两套逻辑。

优缺点和第一种方法正好相反

总结：权衡业务需求发现，C项目不同的模块只有登录注册，其他功能都是和P项目完全相等或者是P项目的阉割版，为了维护更加方便决定在P项目上根据权限进行区分。

### 三、路由实现 ###

1、根据权限加载路由

之前这里是两大坨路由配置，给拆分成两个文件，对应两个平台去维护。

import PRoute from './P.js' 
    import CRoute from './C.js';

const isC= store.state.app.isC; // 是否是C项目
    if (isC) {
      // P平台
      router = new Router({routes: CRoute});
    } else {
      // C平台
      router = new Router({routes: PRoute});
    }

说明：这里从vuex里获取的权限控制是根据域名判断的，所以进入页面就使用 isC 去判断是可以的。

const state = {
      isTripartite: location.host.indexOf('C') > -1 
    }

如果配置是根据接口来获取这里会有问题，因为加载路由时参数还没有获取到。这个项目相对比较固定，所以使用域名去判断，对于项目需要多次私有化部署的需求，则需要把路由加载放在获取平台配置的成功回调中去做。

### 四、P项目信息隐藏 ###

还是从vuex获取当前平台信息

data () {
        return {
          isC: this.$store.state.app.isC
        }
      },

在页面上根据isC字段判断来操作。

### 五、总结 ###

P项目和C项目都是同一套代码，根据域名去加载不通的路由和一些业务判断。

发表评论取消回复

表情：

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

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

相关阅读

相关【Vue框架】Vue路由配置

前言为了看后端权限在前端的使用，阅读vue-element-admin-4.2.1代码来进行理解；同时了解一下前端框架，并对部分内容进行详细介绍（学习）。本文主要从ma

本是古典何须时尚/ 2024年03月17日 21:55/ 0 赞/ 97 阅读

相关 Vue项目-路由demo

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

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

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

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

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

相关 vue项目根据配置控制路由

一、需求背景在当前项目（叫Parent项目，简称P项目）中抽离一个精简版项目（Child项目，简称C项目），用作其他用途。隐藏P项目的所有logo和名称，增加部分页面如

矫情吗；*/ 2022年12月26日 09:29/ 0 赞/ 110 阅读

相关 VUE_vue二级路由配置

二级路由配置path时前面不能有 " / " 在一级路径信息数组中添加一个children配置项： { path:'/hot',component:()=

淩亂°似流年/ 2022年10月07日 09:48/ 0 赞/ 210 阅读

相关 vue3 配置路由

使用 vue3 配置路由，步骤如下 1、安装路由 npm install vue-router@4 笔者这里的演示项目名称是 vue3-project !

超、凢脫俗/ 2022年10月06日 01:56/ 0 赞/ 244 阅读

相关配置Vue的路由

在Vue环境中，找到index.js文件中代码如下： import Vue from 'vue' import Router from 'vue-router'

骑猪看日落/ 2022年05月26日 06:05/ 0 赞/ 180 阅读

相关 vue路由配置

1.首先在项目中安装vue-router 在terminal中输入 npm install vue-router --save 2.在mian.js中导入router

柔情只为你懂/ 2022年04月08日 08:39/ 0 赞/ 256 阅读

相关 Vue中管理路由-vue-router路由配置

在新建Vue Router时，Router的构建选项有routes、mode、base、linkActiveClass、linkExactActiveClass等等，这里只介绍

àì夳堔傛蜴生んèń/ 2022年02月24日 09:24/ 0 赞/ 1057 阅读

相关 vue 路由详细配置

1、设置路由元信息在路由中: meta:{键值对}; 在对应组件中 this.$route.meta.键名读取

红太狼/ 2021年07月24日 11:27/ 0 赞/ 459 阅读