Vue获取url路由地址、参数

文章目录

1.window.location
- 当前URL
- 协议
- 域名 + 端口
- 域名
- 端口
- 路径部分
- 请求的参数
- 获取’?'前边的URL
- 获取#之后的内容
2.vue-router 获取参数
- this.$route
- this.$route.fullPath
- this.$route.hash
- this.$route.matched
- this.$route.meta
- this.$route.params
- this.$route.query

1.window.location

实例：http://www.myurl.com:8866/test?id=123&username=xxx

当前URL

window.location.href
结果：http://www.myurl.com:8866/test?id=123&username=xxx

协议

window.location.protocol
结果：http

域名 + 端口

window.location.host
结果：www.myurl.com:8866

域名

window.location.hostname（）
结果：www.myurl.com

端口

window.location.port（）
结果：8866

路径部分

window.location.pathname（）
结果：/test

请求的参数

window.location.search
结果：?id=123&username=xxx

备注：获取参数

// var url="www.baidu.com?a=1&b=2&C=3";//测试地址/** 分析：最前面是?或&，紧跟着除 ?&#以外的字符若干* 然后再等号，最后再跟着除 ?&#以外的字符* 并且要分组捕获到【除?&#以外的字符】*/var reg=/[?&]([^?&#]+)=([^?&#]+)/g;
var param={};
var ret =  reg.exec(url);
while(ret){ // 当ret为null时表示已经匹配到最后了，直接跳出param[ret[1]]=ret[2];ret = reg.exec(url);
}
console.log(param)

获取’?'前边的URL

window.location.origin（）
结果：http://www.myurl.com:8866

获取#之后的内容

window.location.hash
结果：null

2.vue-router 获取参数

this.$route

this.$route.fullPath

this.$route.hash

this.$route.matched

this.$route.meta

this.$route.params

this.$route.query

Vue获取url路由地址、参数相关推荐

express获取url路由地址参数的方法获取get请求参数
用express写接口我觉得是非常快的,直接集成好了. 下面来说说express获取路由地址参数的方法. var express=require('express'); var app=express ...
vue 获取当前路由地址
vue 获取当前路由地址 1.router和$route的区别 $router: 路由操作对象,只写.需要对路由进行操作时使用.如路由跳转 $route: 路由信息对象,只读.获取路由相关信息时使用. ...
Vue 获取URL中的参数
实现效果如下: 获取URL中的参数,并显示在页面上流程: 1.在index.js中编辑代码如下: import {createRouter,createWebHashHistory} from 'v ...
Vue获取当前路由地址以及当前页面的地址
最近在做一个电商项目,其中搜索功能封装成一个组件用在多个路由组件中,用户通过输入相关商品名进行搜索,其中要实现的一个点就是:要是当前为商品页面则更新商品列表,若不是商品页面,则新开一个商品窗口. 实现 ...
vue获取上级路由地址
可以通过从vue-router中beforeRouteEnter钩子函数中的from参数中获取url,利用next()传递回当前组件,具体代码如下: <sctipt>export defa ...
vue 获取当前路由地址——router.currentRoute与$route
1.router.currentRoute 相当于 $route,但是$route.path或者$route.fullPath只能在组件中用组件里头:`/user?a=10` $route.path ...
vue中如何获取当前路由地址
vue获取当前路由地址 1.router和$route的区别 $router: 路由操作对象,只写.需要对路由进行操作时使用.如路由跳转 $route: 路由信息对象,只读.获取路由相关信息时使用.如 ...
vue 替换路由地址参数（动态修改路由参数）
1.此种方式适用于直接替换已存在的路由参数值,无需新增或删除路由参数: 在项目中,比如进入我的订单页面,订单页面有不同的几个菜单,如:待付款.待发货.待收货.待收货等: 我们想要实现从不同的菜单点击进 ...
如何获取URL中的参数
获取URL中的参数 1. 使用JS函数获取URL参数使用示例 2. Angular应用中,从URL中获取参数信息的方法使用示例 ActivatedRoute属性 1. 使用JS函数获取URL参数 ...

Vue获取url路由地址、参数

文章目录

1.window.location

当前URL

协议

域名 + 端口

域名

端口

路径部分

请求的参数

获取’?'前边的URL

获取#之后的内容

2.vue-router 获取参数

this.$route

this.$route.fullPath

this.$route.hash

this.$route.matched

this.$route.meta

this.$route.params

this.$route.query

Vue获取url路由地址、参数相关推荐

最新文章

热门文章