Vue项目获取url中的参数(亲测可用)

目录
  • 情况一：内部页面之间互相传值
  • 情况二：外部跳转VUE项目时自带参数
  • 1 获取?后面的参数
  • 2 获取不带?的URL中的参数

亲测可用，若有疑问请私信

获取url参数有两种情况：

情况一：内部页面之间互相传值

这里先讲情况一，因为同一项目内互相传值比较简单，假如要从A页面跳转到B页面，并传值。就要在A页面这么写

this.$router.push({name:"B",query:{
    Id : this.tId ,
    ...
}})

进入B页面之后，在B页面内这么写

this.Id = this.$route.query.Id;

就能将A页面的id传入B页面，进行数据调取。

情况二：外部跳转VUE项目时自带参数

例如http://www.hahaha.com/list?Id=9#/

外部进入的url会放在VUE项目编译以后自动加 “#/” ，其中带的参数在#/之前，所以用以上方法无法获取，那么我们只能用JS的方法来获取

var url = window.location.href ;             //获取当前url
    var dz_url = url.split('#')[0];                //获取#/之前的字符串
    var cs = dz_url.split('?')[1];                //获取?之后的参数字符串
    var cs_arr = cs.split('&');                    //参数字符串分割为数组
    var cs={};
    for(var i=0;i<cs_arr.length;i++){         //遍历数组，拿到json对象
      cs[cs_arr[i].split('=')[0]] = cs_arr[i].split('=')[1]
    }
this.id = cs.id;                                           //这样就拿到了参数中的数据

补充：vue获取URL中的参数

1 获取?后面的参数

http://192.168.1.105:8080/#/idInput?username=%22%E5%BC%A0%E4%B8%89%22

获取参数方法 let id = this.$route.query.username

2 获取不带?的URL中的参数

http://192.168.1.12:8080/#/home/newsinfo/234

在路由中配置路由

{ path: '/home/newsinfo/:id', component: Newsinfo }

.vue页面设置

 <template>
          <router-link :to="'/home/newsinfo/' + item.id">
    </template>

获取参数方法 let id = this.$route.params.id

到此这篇关于Vue项目获取url中的参数(亲测可用)的文章就介绍到这了,更多相关vue url参数内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • VueJS 取得 URL 参数值的方法

    先给大家介绍下VueJS取得URL参数 vuejs取得URL中参数的值 地址:http://localhost:3333/#/index?id=001 结果:001 console.log(this.$route.query.id) PS:下面给大家介绍下vue自定义表单生成器可根据json参数动态生成表单效果 介绍 form-create 是一个可以通过 JSON 生成具有动态渲染.数据收集.验证和提交功能的表单生成器.并且支持生成任何 Vue 组件.结合内置17种常用表单组件和自定义组件,再

  • vue 获取url参数、get参数返回数组的操作

    这是vue过滤器 获取url参数,返回数组 Vue.prototype.$url=function(){ var url = decodeURIComponent(location.search); //获取url中"?"符后的字串 var theRequest = new Object(); if (url.indexOf("?") != -1) { var str = url.substr(1); strs = str.split("&&quo

  • vue实现前端保持筛选条件到url并进行同步参数设计

    目录 前言 基础知识 设计思路 decode encode 详情页返回列表页 结语 前言 在有列表页的系统中,常常为了提高用户体验,需要保持列表页的筛选条件.分页情况.需要做到刷新页面,从详情页返回列表页保留之前的筛选情况.你可能会说 vue 用 keep-alive 缓存列表页不就行了?为什么不好呢? 因为正确的做法是将筛选条件保存在 url 上,这样可以复制给别人直接使用,并且你可以看到几乎所有网站都是使用这种方法.接下来会带大家了解有关 url 参数的基础知识和设计思路.并且封装成了一个

  • vue 获取url里参数的两种方法小结

    我就废话不多说了,大家还是直接看代码吧~ 第一种: const query = Qs.parse(location.search.substring(1)) let passport = query.passport; 第二种: var query=this.$route.query; let lat = query.lat; 补充知识:Vue通过query获取路由参数 现在来讲Vue通过query获取路由参数 可以看见com1组件里的路由参数为 name=zhangsan&job=teache

  • vue不通过路由直接获取url中参数的方法示例

    前言 众所周知vue中使用路由的方式设置url参数,但是这种方式必须要在路径中附带参数,而且这个参数是需要在vue的路由中提前设置好的. 相对来说,在某些情况下直接在url后面拼接?mid=100的方式传递参数更灵活,你不需要设置路由,只需要在url后拼接参数即可,但是这种方式就需要通过javascript获取并提取url中的参数,通过传统的方式直接在页面中获取是行不通的了,因为vue中是无法通过location.search()来获取url问号之后的内容的. 当然,这个问题也有解决方法,就是把

  • 在vue中利用全局路由钩子给url统一添加公共参数的例子

    有的时候我们可能有这样的需求,比如现在url为m.taoyuewenhua.com/#/ 我们需要在用户每次跳转路由的时候监控有没有abc这个参数. 如果有,后端要求我们在以后跳转任何url的时候,都要在url携带上这个参数.就变成m.taoyuewenhua.com/#/&abc=xxx; 这个参数称为"公共参数"; 那么,我们该如何做呢?因为vue中有很多组件.在每个组件都写的话,太麻烦.所以这个时候,全局路由钩子登场了.分别是 router.beforeEach 全局导航

  • Vue项目获取url中的参数(亲测可用)

    目录 情况一:内部页面之间互相传值 情况二:外部跳转VUE项目时自带参数 1 获取?后面的参数 2 获取不带?的URL中的参数 亲测可用,若有疑问请私信 获取url参数有两种情况: 情况一:内部页面之间互相传值 这里先讲情况一,因为同一项目内互相传值比较简单,假如要从A页面跳转到B页面,并传值.就要在A页面这么写 this.$router.push({name:"B",query:{ Id : this.tId , ... }}) 进入B页面之后,在B页面内这么写 this.Id =

  • 详解Vue项目引入CreateJS的方法（亲测可用）

    1 前 言 1.1 CreateJS介绍 CreateJS是基于HTML5开发的一套模块化的库和工具. 基于这些库,可以非常快捷地开发出基于HTML5的游戏.动画和交互应用. A suite of modular libraries and tools which work together or independently to enable rich interactive content on open web technologies via HTML5. 包含4类工具库 EaselJS

  • 浅析JS获取url中的参数实例代码

    js获取url中的参数代码如下所示,代码简单易懂,附有注释,写的不好还请见谅! function UrlSearch() { var name, value; var str = location.href; //取得整个地址栏 var num = str.indexOf("?") str = str.substr(num + 1); //取得所有参数 stringvar.substr(start [, length ] var arr = str.split("&&

  • 使用JavaScript获取URL中的参数(两种方法)

    本文给大家分享两种方法使用js获取url中的参数,其中方法二是使用的正则表达式方法,大家可以根据需要选择比较好的方法,废话不多说了,直接看详细介绍吧. 方法一: //取url参数 var type = request("type") function request() { var query = location.search; var paras = arguments[0]; if (arguments.length == 2) { query = arguments[1]; }

  • python 获取url中的参数列表实例

    Python的urlparse有对url的解析,从而获得url中的参数列表 import urlparse urldata = "http://en.wikipedia.org/w/api.php?action=query&ctitle=FA" result = urlparse.urlparse(urldata) print result print urlparse.parse_qs(result.query) 输出: ParseResult(scheme='http',

  • js获取url中的参数且参数为中文时通过js解码

    如果传递的参数是: 复制代码 代码如下: <a href="${pageContext.request.contextPath}/productdisplay/productDisplay_productDisplayUI.action?pkId=${pkId}&name=${name}" style="color:white; margin-top:10px; margin-bottom:10px;">${name}</a> 获取u

  • Javascript仿PHP $_GET获取URL中的参数

    复制代码 代码如下: /* 像PHP的 $_GET['arg'] 那样获得地址栏GET参数 */function getArgs() {    var args = {};    var query = location.search.substring(1); // Get query string    var pairs = query.split("&");                   // Break at ampersand     for(var i =

  • JS获取URL中的参数数据

    复制代码 代码如下: function getParam(paramName) {    paramValue = "";    isFound = false;    if (this.location.search.indexOf("?") == 0 && this.location.search.indexOf("=") > 1) {        arrSource = unescape(this.location.

  • JavaScript获取URL中参数querystring的方法详解

    JavaScript获取URL中参数querystring的方法详解

    一. 获取url的querystring参数 获取url的querystring参数的两种方法如下: 1.1 方法一:正则匹配 //获取url中的参数 function getQueryString(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", i); // 匹配目标参数 var result = window.location.search.substr(1).

  • 通过正则表达式获取url中参数的简单实现

    url: http://xxxx.com?name=魅力&id=123 js中: var name = getUrlParam("name"); /*通过正则获取url中的参数*/ function getUrlParam(name){ var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)"); var r = window.location.search.subst

随机推荐