Vue项目，菜单栏动态渲染

前两天做了vue项目的菜单栏的动态渲染，其实很简单，就是后端会传递给我菜单的图标，名称，跳转的路径以及路由跳转时做需要携带的参数。
但是后端传递给前端的数据中，前端在页面中做跳转的时候，他的携带的参数有问题，因为后端给的需要携带参数的数据是一个json对象，前端在做跳转的时候，直接将json中的数据携带到了地址栏，而前端需要用的参数其实是一个对象的某一个属性。
这时就需要做一转换的处理：
下面是后端传递过来的动态菜单的数据（一个为例）：

{
	parent:null,
	code: null，
	createtime: "2021-10-16 14:24:45"，
	depth: 1，
	enable: 1，
	icon: ""，
	id: "e2dea67c26f64cf38256a0a08ebe36f9"，
	isonly: 1，
	isquick: 1，
	isshow: 1，
	opentype: 0，
	order_index: 1，
	params: "{\n\t\"username\": \"userInfo.user_name\",\n\t\"system\": \"userInfo.system_code\"\n}"，
	parent: "9d56ad3cc3b34efa9017de1fe5e688a7"，
	project: "应用"，
	systemcode: "ding"，
	title: "提交"，
	type: 0，
	updatetime: "2021-10-16 17:11:15"，
	url: "ticketSubmit"
}

其中params字段是前端需要做跳转时携带的参数，如果不做处理：

<li
   v-for="(item,index) in navList"
    :key="index"
    :class="[(index + 1) % 3 == 0 ? 'noBorder' : '']"
    v-show="showNav(index)"
    @click="goPage(item.url, JSON.parse(item.params))"
>

此时跳转时地址栏为：

"http://localhost3000/ticketList?username=userInfo.user_name&system=userInfo.system_code"

正确的应该为：

"http://localhost3000/ticketList?username=mqs123_name&system=dev"

实际上userInfo是我本地的一个对象，我跳转时需要传递的参数是userInfo中对应的值（需要使用的时候我已经将对象的每个都赋值了）

 let userInfo = reactive({
      user_name: '',
      system_code: '',
      cellphone: '',
      email: '',
      user_fullname: '',
      corp_id:''
 });

解决方案:在获取菜单数据的时候，使用eval()函数，将json强制转换，将里面的值更换掉，这时再做跳转时，他的参数就是本地userinfo对象中所需要的值了。

 Http.h("GetMenus", data).then(res => {
  console.log('请求菜单的接口数据',res)
   if(res.Code == 200){
     let data = res.Result.data.filter((item)=>{
       return item.parent != null
     })
     //对数据进行处理
     for(let i=0;i<data.length;i++){
       if(data[i].params!=null){
         //遍历data[i].params 将他转为对象
         data[i].params = JSON.parse( data[i].params)
         for(let key in data[i].params){//根据键去更改对应的值
           data[i].params[key] = eval(data[i].params[key])
         }
       }
     }
     // console.log('data',data)
     resolve(data);
   }else{
     Dialog.alert({
       message: "没有获取到菜单数据",
       confirmButtonColor: '#1989fa',
     });
   }
 })

eval()函数
作用：它的作用是把对应的字符串解析成js代码并运行（将json的字符串解析成为JSON对象）；

eval(“var a=1”);//声明一个变量a并赋值1。
eval(“2+3”);//执行加运算，并返回运算值。
eval(“mytest()”);//执行mytest()函数。
eval("{b:2}");//声明一个对象。如果想返回此对象，则需要在对象外面再嵌套一层小括如下：eval("({b:2})");
注：使用eval来解析JSON格式字符串的时候，会将{}解析为代码块，而不是对象的字面量

1. .在JSON格式的字符串前面拼接上 “var o =”
2. 把JSON格式的字符串使用()括起来，就不会将{}解析为代码块，而是表达式