3月11日 周五

作日回顾

.动态添加路由

实现语句

vue 2.0使用
this.$router.addRoutes();
this.$router.addRoutes(currRoutes);//添加路由和 Home是同级别的

vue3.0使用 + router4.0
this.$router.addRoute();
this.$router.addRoute('Home',currRoutes); //可以实现将currRoutes作为 Home的子路由，插入到Hoem下
//并且还有删除路由语句

	ps版本问题：
	请注意vue-router的4.0以上版本， vue2.0 是不支持，
	4.0 以上版本只能 vue3 使用，过高版本会导致页面变白屏.
	
	npm install vue-router --save
	这样会安装最新版本，目前是 4.0 ，

实现思路

vue2.0 + router 3. 0 ，只能使用

this.$router.addRoutes();

因为没能实现在 home 下添加子级路由的想法，所以就将 home 和其子路由都从 router.js中分离出来。
方案一：在 vuex 中 通过 公共路由 和 分权限路由 进行拼接，返回一个 重新定义的带子集的 home 路由
方案二：拿到路由进行替换，（PS感觉比较和第一种相似且复杂）

tips1 ： 路由表

vuex 中state 模拟拿到的数据

vuex中 其他

	getters: { //与上一个方法类似
		allRouters(state) {
			return state.allRouters
		},
		nowRoutes(state) {
			let name = state.shenfen;
			// let name = sessionStorage.shenfen;
			console.log('getters  name:' + name);
			//拼接新 路由，state身份变化时，自动刷新getters，没有可能导致不更新
			let aa = state.allRouters.PublicRouter;
			if (name == '测试') {
				let bb = state.allRouters.text;
				aa[0].children.push(...bb); //数组拼接不会产生新数组
			}
			return aa;
		}
	},

	mutations: { //改变状态,不建议使用这种方法
		LOGIN(state, params) { //需要点击事件去提交  在home中定义按钮           需要parmsa来接受
			state.shenfen = params.shenfen;
			sessionStorage.shenfen = params.shenfen;
		},
		LOGOUT(state) {
			state.shenfen = null;
			window.sessionStorage.removeItem('shenfen')
		}
	},

	actions: {  //actions提交mutations 不直接改变状态
		login(context, params) {
			context.commit('LOGIN', params)
		},
		logout(context) {
			context.commit('LOGOUT')
		}
	},

tips2：登录中获取身份，

登录成功时

 if (res.data.stateCode == 0) {
        this.$message({
          message: res.data.stateMsg,
          type: "success",
        });
        window.sessionStorage.token = res.data.token;

        //本地存储 身份
        sessionStorage.shenfen = this.department;
        // console.log(sessionStorage.shenfen);
        this.$store.dispatch("login", {
          shenfen: this.department,
        });

        // return;
        //添加路由 ，在跳转页面之前。
        this.addrouters();
        this.$router.push("/homePage").catch(() => {});
      } 

********************
  addrouters() {
      let nowRoutes = this.$store.getters.nowRoutes; //调用时不用 给nowRoutes加（）
      //console.log("登录页");
      //console.log(nowRoutes);
      this.$router.addRoutes(nowRoutes);
    },
    

tips3：小bug，页面刷新后，通过this.$router.addRoutes(); 添加的路由会消失。

在 app.vue 下的created 中，重新挂载 动态路由

 created() {
    //判断是否存在，而选择是否刷新 返回。
    if (sessionStorage.shenfen == null) {
      console.log(sessionStorage.shenfen);
    } else {
      //页面刷新 ，添加路由
      let nowRoutes = this.$store.getters.nowRoutes;
      this.$router.addRoutes(nowRoutes);
    }
  },

tips4: 将路由渲染到 home页面的 侧边导航栏中

此时已经在添加上了 动态路由 ，

在home页面打印一下 添加的动态路由

 console.log(this.$router);
    添加路由到侧边栏
    
打印出来的路由只是定义的，
options:
routes: Array(2)
0: {path: '/login', name: 'Login', component: ƒ}
1: {path: '/choose_dep', name: 'Choose_Dep', component: ƒ}
length: 2
[[Prototype]]: Array(0)
[[Prototype]]: Object

 console.log(  this.$store.getters.nowRoutes );

目标侧边栏样式

       {
            icon: require("../assets/images/ceshi.png"),
            url: "test",
            title: "测试1",
            children: [
              {
                icon: require("../assets/images/ceshi.png"),
                url: "test2",
                title: "测试2",
              },
            ],
          },

在create 中调用

 created() {
    // 添加路由到侧边栏，并默认选中第一个
    this.createSidsbar();
  },

createSidsbar

	//添加 创建侧边栏，默认选中第一个
  createSidsbar() {
    let data = this.$store.getters.nowRoutes[0].children;
    // console.log(data);
    let data1 = [];
    data.forEach((item, index) => {
      //第一级
      data1[index] = {
        url: item.meta.url,
        title: item.meta.title,
        icon: item.meta.icon,
      };
      //如果有子级，子级也是一个数组，可能有多个数据。
      if (item.children) {
        console.log(item.children);
        let data3 = [];
        for (let i = 0; i < item.children.length; i++) {
          let obj = {
            url: item.children[i].meta.url,
            title: item.children[i].meta.title,
            icon: item.children[i].meta.icon,
          };
          data3.push(obj); //一个个 push进去，是因为children是一个对象数组，不是单个对象
        }
        console.log(data3);
        data1[index].children = data3;
      }
    });
    console.log(data1);
    this.leftMenu.navList.push(...data1); //将 整理好的data1 拼接到 navList 中
    //默认选中第一个
    this.toTab( data1[0].title , data1[0].url)
  },