zoukankan      html  css  js  c++  java
  • Vue中this.$router.push(参数) 实现页面跳转

    很多情况下,我们在执行点击按钮跳转页面之前还会执行一系列方法,这时可以使用 this.$router.push(location) 来修改 url,完成跳转。

    push 后面可以是对象,也可以是字符串:

    // 字符串
    this.$router.push('/home/first')
    // 对象 query相当与发送了一次get请求,请求参数会显示在浏览器地址栏中
    this.$router.push({ path: '/home/first' })
    // 命名的路由 params相当与发送了一次post请求,请求参数则不会显示,并且刷新页面之后参数会消失
    this.$router.push({ name:'Login', params: { id: this.id } )

    // 当路由配置更改为
    //路由配置:

    //{path:'/login/:id',name:'Login',component:Login}

    //并且再次发送请求,请求数据不会随着页面的刷新而消失
    跳转页面并传递参数的方法:

    1.Params

    由于动态路由也是传递params的,所以在 this.$router.push() 方法中path不能和params一起使用,否则params将无效。需要用name来指定页面。

    及通过路由配置的name属性访问

    在路由配置文件中定义参数:

    /* router.js 文件*/
    import Vue from "vue";
    import Router from "vue-router";
    import MediaSecond from "@/views/EnterprisePage/MediaMatrix/second"; //资讯列表

    Vue.use(Router);
    export default new Router({
    routes: [ /* 进行路由配置 */
    {
    name: "MediaSecond",
    path: "/MediaSecond",
    component: MediaSecond
    },
    ]
    })

    /* 后面还需要接一空行,否则无法通过 ESlint 语法验证 */
    通过name获取页面,传递params:

    this.$router.push({ name: 'MediaSecond',params:{artistName:artistName,imgUrl:imgUrl,type:2} })
    在目标页面通过this.$route.params获取参数:

    if (this.$route.params.type == 2) {
    this.type = apis.getAtistDetails;
    } else {
    this.type = apis.getMessageList;
    }
    2.Query

    页面通过path/name和query传递参数,该实例中row为某行表格数据

    this.$router.push({ name: 'DetailManagement', query: { auditID: row.id, type: '2' } });
    this.$router.push({ path: '/DetailManagement', query: { auditID: row.id, type: '2' } });
    在目标页面通过this.$route.query获取参数:

    this.$route.query.type


    ————————————————
    版权声明:本文为CSDN博主「吴冬雪~」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
    原文链接:https://blog.csdn.net/qq_37548296/article/details/90446430

  • 相关阅读:
    BZOJ4003:[JLOI2015]城池攻占——题解
    洛谷3388:【模板】割点(割顶)——题解
    洛谷3805:【模板】manacher算法——题解
    BZOJ3236:[AHOI2013]作业——题解
    SPOJ3267/DQUERY:D-query——题解
    自动化移动安全渗透测试框架:Mobile Security Framework
    爬取京东评论,且修改网址直接可复用哦(送代码)
    谈谈从事IT测试行业的我,对于买房买车有什么样的感受
    python调用adb命令进行手机操作
    python selenium 处理时间日期控件
  • 原文地址:https://www.cnblogs.com/javalinux/p/15593678.html
Copyright © 2011-2022 走看看