• vue路由跳转(新开页面 当前页面)


    vue-router传递参数分为两大类:

    • 编程式的导航 router.push
    • 声明式的导航 <router-link>

    1、命名路由传递参数需要使用params来传递,这里一定要注意使用params不是query。目标页面接收传递参数时使用params

         特别注意:命名路由这种方式传递的参数,如果在目标页面刷新是会出错的。

        使用方法如下:

    this.$router.push({ name: 'news', params: { userId: 123 }})

    2、查询参数其实就是在路由地址后面带上参数和传统的url参数一致的,传递参数使用query而且必须配合path来传递参数而不能用name,目标页面接收传递的参数使用query。
         注意:和name配对的是params,和path配对的是query

    使用方法如下:

    this.$router.push({ path: '/news', query: { userId: 123 }});

    声明式的导航

    声明式的导航和编程式的一样

    <router-link :to="{ name: 'news', params: { userId: 1111}}">click to news page</router-link>

    总结:

    1.命名路由搭配params,刷新页面参数会丢失
    2.查询参数搭配query,刷新页面数据不会丢失
    3.接受参数使用this.$router后面就是搭配路由的名称就能获取到参数的值

    一、当前页面打开:

     this.$router.push({
                path: '/applicationManage/voice',
                query: {
                  taskId: data.taskId,
                }
    })

    二、新开页面:

     let newUrl = this.$router.resolve({
              path: "/historyRecord"
            });
    window.open(newUrl.href, "_blank");
  • 相关阅读:
    开始学习Angular Mobile UI
    .Net程序员飞扬有用的85个工具
    数据库查询效率,百万数据测试
    SQL Join的一些总结
    MODRD 指令 读取地址是哪儿来的
    如何在不同编程语言中获取现在的Unix时间戳(Unix timestamp)?
    easyui datagrid 的分页刷新按钮
    HttpRequest Get Post,WebClient Get
    GetWindowThreadProcessId用法(转)
    EASYUI DATAGRID 多列复选框CheckBox
  • 原文地址:https://www.cnblogs.com/xiaolucky/p/12750335.html
Copyright © 2020-2023  润新知