vue中获取url参数
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue中获取url参数相关的知识,希望对你有一定的参考价值。
参考技术A 1、路由获取this.delivery_asn = this.$route.query.delivery_asn;
2、非路由获取
(1)在js文件中写方法
export function getUrlKey(name,url)
return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(url) || [, ""])[1].replace(/\+/g, '%20')) || null
(2)在项目文件中引入
import getUrlKey from '@/utils';
(3)在项目文件中使用
this.delivery_asn = getUrlKey("delivery_asn ",window.location.href)
如果url中参数base64编码
let path = window.location.href.split("?") //分割url
let href = path[0]+"?"+path[1]
let query = Base64.decode(path[1]) //解码
href = path[0]+"?"+ query //解码后重组
this.delivery_asn = getUrlKey("delivery_asn ",href)
vue-router 利用url传递参数
参考技术A原文链接: https://jspang.com/detailed?id=25#toc25
我们在第3节虽然已经学会传递参数,但是我们这些老程序员的情怀还是利用url来传值,因为我们以前在前后端没有分开开发的时候,经常这样做。在实际开发也是有很多用URL传值的需求,比如我们在新闻列表中有很多新闻标题整齐的排列,我们需要点击每个新闻标题打开不同的新闻内容,这时在跳转路由时跟上新闻编号就十分实用。
:冒号的形式传递参数 我们可以在路由配置文件里以:冒号的形式传递参数,这就是对参数的绑定。我们在 /src/router/index.js 文件里配置路由。
我们需要传递的参数是新闻 ID(newsId) 和新闻标题 (newsTitle) 。所以我们在路由配置文件里制定了这两个值。
在 /components 目录下建立我们 params.vue 组件,也可以说是页面。我们在页面里输出了 url 传递的的新闻ID和新闻标题。
在 App.vue 文件里加入 <router-view> 标签。这时候我们可以直接利用url传值了。
我们已经实现了以 url 方式进行传值,这在实际开发中经常使用,必须完全了解。
正则表达式在URL传值中的应用
上边的例子,我们传递了新闻编号,现在需求升级了,我们希望我们传递的新闻ID只能是数字的形式,这时候我们就需要在传递时有个基本的类型判断,vue是支持正则的。
加入正则需要在路由配置文件里 (/src/router/index.js) 以圆括号的形式加入。
加入了正则,我们再传递数字之外的其他参数, params.vue 组件就没有办法接收到。
以上是关于vue中获取url参数的主要内容,如果未能解决你的问题,请参考以下文章