路由配置：
页面：
路由地址，采用query传参方式：参数1=XXX&参数2=XXX
params参数
query参数
插播传送门=>>>Vue Router 的params和query传参的使用和区别（详尽）
$router返回的是当前项目中的路由器对象。
$route返回的是当前路由信息。
vueconfigjs 是一个可选的配置文件，如果项目的 (和 packagejson 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。
vueconfigjs 是vue的配置文件，必须创建在demo根目录下，该配置文件中，只能使用commonjs模块化语法，使用moduleexport导出，格式如下。
@符号代表src资源目录，在vueconfigjs文件中将路径解析，pathresolve是拼接路径方法。将@c定义为当前绝对路径
@c代表src目录下的components文件，@v代表src目录下的views文件，其他同理，后续在其他文件中引入文件时，只需要使用以下方法即可导入，不会随着文件目录的改变而改变。
什么是request对象
Request对象的作用是与客户端交互，收集客户端的Form、Cookies、超链接，或者收集服务器端的环境变量。
request对象是从客户端向服务器发出请求，包括用户提交的信息以及客户端的一些信息。客户端可通过HTML表单或在网页地址后面提供参数的方法提交数据，然后通过request对象的相关方法来获取这些数据。request的各种方法主要用来处理客户端浏览器提交的请求中的各项参数和选项。
在JS中获取到request，网页地址的方法:
windowlocationhref这里假设URL完整为：baiducom/indexhtmltest=233333
这里要取request中值的属性，可以使用正则表达式获取
正则表达式，又称规则表达式。（英语：Regular Expression，在代码中常简写为regex、regexp或RE），计算机科学的一个概念。正则表通常被用来检索、替换那些符合某个模式(规则)的文本。
首先使用RegExp构造一个正则正则表达式对象
var reg = new RegExp("(^|/|&)test=([^&])(&|$)", "i");参数
pattern 一个字符串，指定了正则表达式的模式或其他正则表达式。
attributes 可选的字符串，包含属性 "g"、"i" 和 "m"，分别用于指定全局匹配、区分大小写的匹配和多行匹配。ECMAScript 标准化之前，不支持 m 属性。如果 pattern 是正则表达式，而不是字符串，则必须省略该参数。
修饰符
i 执行对大小写不敏感的匹配。
g 执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。
m 执行多行匹配。
然后使用match匹配出结果来
var match= windowlocationhrefmatch(reg);match() 方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。
参数
searchvalue 规定要检索的字符串值。
regexp 规定要匹配的模式的 RegExp 对象。如果该参数不是 RegExp 对象，则需要首先把它传递给 RegExp 构造函数，将其转换为 RegExp 对象。
取出结果
match[2]返回：233333
将它封装为一个函数
function getRequestValue(name) {var reg = new RegExp("(^|/|&)" + name + "=([^&])(&|$)", "i");
var match= windowlocationhrefmatch(reg);
return match&&match[2]||null;
}
完整实例代码：
<html><head>
<title></title>
</head>
<body>
</body>
<script type="text/javascript">
function getValue(name) {
var reg = new RegExp("(^|/|&)" + name + "=([^&])(&|$)", "i");
var match= windowlocationhrefmatch(reg);
return match&&match[2]||null;
}
consolelog(getValue('test'));
</script>
</html>
js获取元素方法有：
1、getElementById ：根据指定的 id 属性值得到对象。返回 id 属性值等于 sID 的第一个对象的引用。假如对应的为一组对象，则返回该组对象中的第一个。
2、getElementsByName：getElementsByName(name)该方法与 getElementById() 方法相似，但是它查询元素的 name 属性，而不是 id 属性。
另外，因为一个文档中的 name 属性可能不唯一（如 HTML 表单中的单选按钮通常具有相同的 name 属性），所以getElementsByName() 方法返回的是所有匹配元素组成的数组，而不是一个元素。
3、getElementsByTagName：getElementsByTagName() 方法会使用指定的标签名返回所有的元素（作为一个节点列表），这些元素是您在使用此方法时所处的元素的后代。
getElementsByTagName() 可被用于任何的 HTML 元素
如果把特殊字符串 "" 传递给 getElementsByTagName() 方法，它将返回文档中所有元素的列表，元素排列的顺序就是它们在文档中的顺序。
传递给 getElementsByTagName() 方法的字符串可以不区分大小写。
js获取html元素的方式
+通过ID获取：getElementById('id属性值')
+通过标签名：getElementsByTagName('标签名')
+通过类名：getElementsByClassName('类名')
+通过name属性：getElementsByName('name属性值')
+通过选择器获取一个元素：querySelector
+通过选择器获取一组元素：querySelectorAll
1获取id值为d1的html元素
将获取到的html元素称为DOM节点对象，必须传参数，参数是string类型，是获取元素的id。返回值只获取到一个元素，没有找到返回null。
2通过标签名：getElementsByTagName('标签名')
参数是是获取元素的标签名属性，不区分大小写，根据标签名获取html元素， 返回的是一个数组(伪数组)
通过类名：getElementsByClassName('类名')
参数是元素的类名，返回值是一个类数组，没有找到返回空数组。
通过类名：getElementsByClassName('类名')
必须传参数，参数是是获取元素的name属性，返回值是一个类数组，没有找到返回空数组。
通过选择器获取一个元素：querySelector
参数是选择器，返回值只获取到第一个元素。
通过选择器获取一组元素：querySelectorAll
参数是选择器，返回值是一个数组。
以下通过一个例子来说明URL重定向，和获取重定向之后的地址以及参数：
js重定向
html:
<input type="hidden" id="userid" value="23">
name:<input type="text" id="username" name="username">
<a id="show_a" href="javascript:void(0);" onclick="go();">跳转</a>
js方法重定向
function go(){
var id=$("#userid")val();
var username=$("#username")val();
//两个页面是同目录下可以按照以下写，如果不同则写绝对路径
windowlocationhref="queryImagejspid="+id+"&username="+username;
}
点击“跳转”即可URL重定向
跳转到queryImagejsp页面
$(function(){
//获取当前地址
var url=windowlocationhref;
//输出获取的地址
alert(url);
//截取参数
var param=urlsubstring(urlindexOf("")+1);
//输出截取的参数
alert(param);
var arr=paramsplit("&");
for(i=0;i<arrlength;i++){
//遍历参数输出
alert(arr[i]);
}
});
地址输出：
截取参数：
遍历参数：
以上就是关于(Vue-cli)三、路由传参（params参数&query参数&router和route&vue.config.js）全部的内容，包括:(Vue-cli)三、路由传参（params参数&query参数&router和route&vue.config.js）、js函数中怎么获取request中值的属性、js获取元素方法等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）