博客
关于我
vue中url的跳转以及参数获取
阅读量:492 次
发布时间:2019-03-07

本文共 961 字,大约阅读时间需要 3 分钟。

vue页面跳转url和参数获取

起因 :

  • 这两天因为工作需求, 需要做两个页面跳转(原本是表单的来回弹出,),本来只是一个小小的需求, 怎么想到, 我一个java的小白,
    居然在百度来回查找vue的小知识, 但是很幸运的是我找到了不少, 然后本地测了好多, 由于有一些搞不懂,
    所以就只留了两套自己可以看懂的来记录一下.
    来吧,展示 :
  • 首先, 先从一个页面的跳转记录起来,
  • 1 第一种写法:  this.$router.push({ name: 'claimApplicationdexAct', query: { accountId1: this.roleFormTemp0.accountId0 } })

这种写法其实很好理解 name : 路径的别名(也可以用path: ‘跳转的url’ 来代替) , 后半部分: query 代表一个对象(虽然params也可以代表), query和params在用法上大致相当, 只是query代表 着公开, params代表了 隐私(个人这么理解) 当你想要在url展示点东西的时候 你可以用query来携带参数 ,

例如: 在这里插入图片描述
而我还是喜欢隐藏一下 s♪(・ω・)ノ
我使用的是params
效果: 在这里插入图片描述
第二种方法:
this.$router.replace(‘要访问的url’)
// 我也没搞懂这个方法, 反正用着好使就得嘞

接收路径参数:

  • 1 this.$route.params.参数名称

    这样就拿到想要拿的那个参数的值了, 与上面两个跳转是相对应的用法

    但是一定要注意 跳转路径为 " r o u t e r " ∗ ∗ 接 收 参 数 为 ∗ ∗ " router"** 接收参数为 **" router""route"

  • 2 var test = window.location.href;

    var accountId = test.split("?accountId1=")[1];
    这个方法其实还是蛮好理解的, window.location.href 是获取 一条url ,
    然后通过对其截取的办法 去拿取参数 , 类似于java中的分割字符串, 在指定位置截取以后 拿到我们想要的参数值.

我是小宁, 一个渴望摆脱现状而又没有动力去行动的菜鸟

转载地址:http://pbjcz.baihongyu.com/

你可能感兴趣的文章
No module named cv2
查看>>
No module named tensorboard.main在安装tensorboardX的时候遇到的问题
查看>>
No module named ‘MySQLdb‘错误解决No module named ‘MySQLdb‘错误解决
查看>>
No new migrations found. Your system is up-to-date.
查看>>
No qualifying bean of type XXX found for dependency XXX.
查看>>
No qualifying bean of type ‘com.netflix.discovery.AbstractDiscoveryClientOptionalArgs<?>‘ available
查看>>
No resource identifier found for attribute 'srcCompat' in package的解决办法
查看>>
no session found for current thread
查看>>
No static resource favicon.ico.
查看>>
no such file or directory AndroidManifest.xml
查看>>
No toolchains found in the NDK toolchains folder for ABI with prefix: mips64el-linux-android
查看>>
NO.23 ZenTaoPHP目录结构
查看>>
no1
查看>>
NO32 网络层次及OSI7层模型--TCP三次握手四次断开--子网划分
查看>>
NOAA(美国海洋和大气管理局)气象数据获取与POI点数据获取
查看>>
NoClassDefFoundError: org/springframework/boot/context/properties/ConfigurationBeanFactoryMetadata
查看>>
node
查看>>
node exporter完整版
查看>>
node HelloWorld入门篇
查看>>
Node JS: < 一> 初识Node JS
查看>>