0

问题描述

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,行不通。

你期待的结果是什么?

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

4 天前提问
3 个回答
0

已采纳

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

首先,因为使用了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(_ => {
            //选择了取消,什么都不做
          });
      }
    }
0

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

0

clipboard.png

试过这个吗

撰写答案

推广链接