ElementUI导航条用index属性做路由时如何跳转到新页面

问题描述

ElementUI导航条用index属性做路由时如何跳转到新页面?如下是使用index属性的导航条的一部分:

    <el-menu-item index="/app/home/index">首页</el-menu-item>
        <el-submenu index="2">
          <template slot="title">专项训练</template>
          <el-menu-item index="/app/train/Tword">单词测验</el-menu-item>
          <el-menu-item index="2-2">听力测验</el-menu-item>
          <el-menu-item index="2-3">翻译测验</el-menu-item>
          <el-submenu index="2-4">
            <template slot="title">选项4</template>
            <el-menu-item index="2-4-1">选项1</el-menu-item>
            <el-menu-item index="2-4-2">选项2</el-menu-item>
            <el-menu-item index="2-4-3">选项3</el-menu-item>
          </el-submenu>
        </el-submenu>

问题出现的环境背景及自己尝试过哪些方法

我尝试过使用target="_blank",但它毕竟不是vue-router,行不通。

你期待的结果是什么?

跳转打开新的页面,而不是在当前页面中跳转。

阅读 3.8k
评论 2019-04-14 提问
    3 个回答

    已解决,记录下解决方法。

    首先,因为使用了router模式的index,而且index是必填属性,点击时是一定会尝试跳转路由的,不会在新窗口跳转。就算使用一楼的方式设置a标签,也仍然会改变当前页的路由从而发生在本页面上的跳转。

    先将其禁止,只要为index属性设置成#开头的串,就不会发生跳转了:

            <el-menu-item index="/app/home/index">首页</el-menu-item>
            <!-- 这里因为只想用selectMenu处理,不用router,但又不能不定义index,所以这里的index都加了#符 -->
            <el-submenu index="#train">
              <template slot="title">专项训练</template>
              <el-menu-item index="#word">单词测验</el-menu-item>
              <el-menu-item index="#listen">听力测验</el-menu-item>
              <el-menu-item index="#translate">翻译测验</el-menu-item>

    然后为导航条根标签设置@select="selectMenu",然后在此回调函数中实现新页面跳转:

        //选中导航条中的某项时触发此方法
        //回调参数:(index属性值,保存从根到此节点的路径上的所有index的数组)
        selectMenu(index, indexPath) {
          if (indexPath[0] === "#train") {
            this.$confirm("进入[" + indexPath[1] + "测验]?")
              .then(_ => {
                //选择了确认,到测验页中去组卷,这里只要新窗口打开相应的测验页
                let routeData = this.$router.resolve({
                  //去掉开头防使用index做router的#符
                  path: "/app/train/T" + indexPath[1].replace("#", "")
                });
                window.open(routeData.href, "_blank");
              })
              .catch(_ => {
                //选择了取消,什么都不做
              });
          }
        }

      a标签把el-menu-item包起来,需要修改下样式

        clipboard.png

        试过这个吗

          撰写回答

          登录后参与交流、获取后续更新提醒