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

  • 相关阅读:
    jquery 实现 html5 placeholder 兼容password密码框
    php返回json的结果
    使用PHP读取远程文件
    Sharepoint 自定义字段
    Sharepoint 中新增 aspx页面,并在页面中新增web part
    【转】Sharepoint 2010 配置我的站点及BLOG
    JS 实现 Div 向上浮动
    UserProfile同步配置
    【转】Import User Profile Photos from Active Directory into SharePoint 2010
    Sharepoint 2010 SP1升级后 FIMSynchronizationService 服务无法开启
  • 原文地址:https://www.cnblogs.com/javalinux/p/15593678.html
Copyright © 2011-2022 走看看