请问一个代替switch case的方法,根据取到的下标,跳转页面---附代码

Question

  data: {
    service: ['我的推荐', '关于我们', '反馈建议', '退出登录'], //服务管理列表
  },  
-------------------------------------------------------------
userClick(e) {
    let listIndex = e.currentTarget.dataset.index
    switch (listIndex) {
      case 0:
        wxAPI.routeTo({
          path: 'myRecommendList'//跳转到我的推荐页面
        })
        break;
      case 1:
        wxAPI.routeTo({
          path: 'aboutUs'//跳转到关于我们页面
        })
        break;
      case 2:
        wxAPI.routeTo({
          path:'feedback'//跳转到反馈页面
        })
        break;
      case 3:
        //退出登录首先出现弹窗，用户确认之后再退出
        // wxAPI.routeTo({
        //   path:''
        // })
        break;
    }

Answer 1

一般像这种比较有规则的，可以考虑把菜单（或者命令）定义成模型，然后对模型的一些特殊属性和选用顺序进行约定，比如

1. 有 action 优先使用 action。如果 action 是函数，直接调用；如果 action 是字符串，在当前对象中找名为 action 的方法。如果没有 action，则用默认行为代替（比如 routeTo
2. 按上述规则找到需要执行的函数之后，把 path 作为参数传递进去执行（目前来看主要是为了默认行为）

这样 useClick 中的逻辑既可以处理常多数情况下的默认行为，又具有一定的扩展性，允许进行一些定制行为。

然后这段代码可以修改为：

const someComponent = {
    data: [
        { label: "我的推荐", path: "myRecommendList" },
        { label: "关于我们", path: "aboutUs" },
        { label: "反馈建议", path: "feedback" },
        {
            label: "退出登录",
            // 如果 data 中要以定义函数，可以使用这种形式，但如果时机不对
            // 或者不方便定义函数，可以采用下面那种形式
            action: async () => {
                const confirm = await showConfirm("是否退出");
                if (confirm) {
                    doExit();
                }
            }
        },
        {
            label: "另一种行为",
            action: "doAnotherThing"
        }
    ],

    userClick(e) {
        const { index } = e.currentTarget.dataset;
        const menu = this.data[index];
        if (!menu) { return; }  // 没有匹配的菜单项，进行相应用逻辑处理，这里直接忽略

        const { path, action } = menu;
        // 执行的函数，
        // 先从 this 中去找（假设 action 是字符串，如果不是，会找不到函数），根据情况看要不要加 ?.bind(this)
        // 上一步失败，就直接用 action（假设它是函数）
        // 还是失败（action 是 undefined），使用默认行为，即 wxAPI.routeTo
        const fn = this[action] ?? action ?? (path => wxAPI.routeTo({ path }));

        // 假设 action API 约定需要传入 path（当然可以不处理）
        fn(path);
    }
};

Answer 2

如果你有对应的数据组织结构，比如

data:{
    service:{
        '我的推荐':'myRecommendList',
        '关于我们':'aboutUs',
        '反馈建议':'feedback',
        '退出登录':''
    }
}

则完全可以不要index，直接是:

userClick(e){
    if (data['service'][e.currentTarget.dataset.vaule]!='' ){
        wxAPI.routeTo({path:data['service'][e.currentTarget.dataset.vaule]})
    }
}

因为不知道具体e.currentTarget.dataset的数据情况，假定e.currentTarget.dataset.vaule是可以获取到点击位置文本值的。