美文网首页
vue this.$router.push 跳转地址不对

vue this.$router.push 跳转地址不对

作者: 牙牙and小尾巴 | 来源:发表于2019-04-24 15:28 被阅读0次

    在使用this.$router.push()进行页面跳转时遇到一小问题,带参跳转后,再次通过this.$router.push()进行跳转时,跳转地址与预期不符。

    首先,从A页面带参跳转到B页面,在A页面进行跳转如下:

      this.$router.push({
              path: `edittstkkc/${id}`
            });
    

    跳转后的地址为:

    http://localhost:9528/tskecheng/edittstkkc/103
    

    然后在B页面进行操作后,希望跳转回A页面,操作如下:

     this.$router.push("tstkkc");
    

    希望得到的地址是

    http://localhost:9528/tskecheng/tstkkc
    

    实际上浏览器中的地址如下,this.$router.push是对最后一个/后的内容进行了替换

    http://localhost:9528/tskecheng/edittstkkc/tstkkc
    

    做如下修改后,跳转正确

    this.$router.push("/tskecheng/tstkkc");或
    this.$router.replace("/tskecheng/tstkkc");
    

    路由配置如下:

      {
        path: '/tskecheng',
        component: Layout,
        redirect: '/tskecheng/tstkkc',
        name: 'Tskecheng',
        meta: { title: '特殊团课课程库', icon: 'sp5', roles: ['superadmin'] },
        children: [
          {
            path: 'tstkkc',
            name: 'Tstkkc',
            component: () => import('@/views/kecheng/tstkkc/index'),
            meta: { title: '特殊团课列表', icon: 'sp5', roles: ['superadmin'] },
          },
          {
            path: 'addtstkkc',
            name: 'Addtstkkc',
            component: () => import('@/views/kecheng/tstkkc/add/index'),
            meta: { title: '添加特殊团课', icon: 'sp5', roles: ['superadmin']},
            hidden:true
          },
          {
            path: 'edittstkkc/:tstkid',
            name: 'Edittstkkc',
            component: () => import('@/views/kecheng/tstkkc/edit/index'),
            meta: { title: '编辑特殊团课', icon: 'sp5', roles: ['superadmin']},
            hidden:true
          },
        ]
      }
    

    相关文章

      网友评论

          本文标题:vue this.$router.push 跳转地址不对

          本文链接:https://www.haomeiwen.com/subject/vbsggqtx.html