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

LauZyHou
  • 43

问题描述

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

你期待的结果是什么?

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

回复
阅读 13.1k
4 个回答

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

首先,因为使用了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包起来,需要修改下样式

吨吨
  • 2
新手上路,请多包涵
  1. el-menu-item 设置成 disabled,把 disabled 的样式改成正常的样子
  2. el-menu-item 外层包一个 div,自定义了点击事件来跳转到新页签

这样也解决了打开新页签之后,原页面也跳转路由的问题

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏