zoukankan      html  css  js  c++  java
  • 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");
  • 相关阅读:
    Android开发技术周报 Issue#82
    Android开发技术周报 Issue#81
    Android开发技术周报 Issue#83
    Android开发技术周报 Issue#84
    Android开发技术周报 Issue#85
    Android开发技术周报 Issue#86
    Android开发技术周报 Issue#87
    Android开发技术周报 Issue#88
    Android开发技术周报 Issue#89
    Linux React-Native Android开发环境搭建(附报错信息)
  • 原文地址:https://www.cnblogs.com/xiaolucky/p/12750335.html
Copyright © 2011-2022 走看看