您现在的位置是:网站首页> 编程资料编程资料
Vue项目获取url中的参数(亲测可用)_vue.js_
2023-05-24
362人已围观
简介 Vue项目获取url中的参数(亲测可用)_vue.js_
亲测可用,若有疑问请私信
获取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补充: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页面设置
获取参数方法 let id = this.$route.params.id
到此这篇关于Vue项目获取url中的参数(亲测可用)的文章就介绍到这了,更多相关vue url参数内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!
相关内容
- Javascript中判断对象是否具有属性的5种方法分享_javascript技巧_
- vue常用事件v-on:click详解事件对象,事件冒泡,事件默认行为_vue.js_
- Vue中v-on的基础用法、参数传递和修饰符的示例详解_vue.js_
- Vue项目报错:Uncaught SyntaxError: Unexpected token '<'的解决方法_vue.js_
- vue navbar tabbar导航条根据位置移动实现定位、颜色过渡动画效果的代码_vue.js_
- TSX常见简单入门用法之Vue3+Vite_vue.js_
- Nodejs提取网址参数解决“querystring”已弃用问题_node.js_
- Node版本升级和降级之node版本管理工具nvm详解_node.js_
- JavaScript学习笔记之取值函数getter与取值函数setter详解_javascript技巧_
- 手把手带你安装多个node版本_node.js_
