vue+webpack+vue-cli获取URL地址参数

Posted zenghao1203

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue+webpack+vue-cli获取URL地址参数相关的知识,希望对你有一定的参考价值。

在没有使用webpack+vue router开发中,想要获取RUL传的参数地址,直接通过一个函数就可以获得。

比如在  www.test.com/test.html?sign=test  地址中,想要获取sign的值,通常的方法是用一个函数,

var getUrlStr =  function(name) {
  var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
  var r = window.location.search.substr(1).match(reg);
  if(r != null) return unescape(r[2]);
  return null;
}

var sign = getUrlStr ("sign");

sign的值就为 test ;

那么问题来了,用router开发,是直接通过路由跳转的页面,那该怎样获取呢?

首先想到的也是通过以上方法获取,但试了一下,表示行不通。通过百度了解到,可以直接使用提供的方法;

就如这样,也是同样的传参  http://localhost:8080/#/one?sign=nsrjbxx 

var  sign = this.$route.query.sgin ;

this 指的是 vue 对象,所以放在vue的方法中直接使用就行了,sign 是参数,这个是可以自定义的。

理解很潜,简单的能达到目的,有更深的理解欢迎来评!!!






以上是关于vue+webpack+vue-cli获取URL地址参数的主要内容,如果未能解决你的问题,请参考以下文章

vue-cli在打包后js获取的图片路径错误问题时候

脚手架vue-cli工程webpack的作用和特点

vue-cli&webpack&arcgis API For JS的天坑之路

vue-cli的webpack模版,相关配置文件dev-server.js与webpack.config.js配置解析

使用 webpack 2 和 vue-cli 加载本地字体

解决vue-cli webpack打包后加载资源的路径问题