一,window.location.href: 获取完整的url链接
二,this.$ route.path:前端路由中配置的path
三,this.$ route.fullPath:当前页面除去协议,域名后的完整链接
四,以对象的形式获取当前Url链接?后面拼接的参数,有以下两种方法:
1,this.$route.query
2,以函数的形式,函数参数可以不传:
function GetRequest(str) {
var url = str ? str : decodeURI(location.search); //获取url中"?"符后的字串
var theRequest = new Object();
if (url.indexOf('?') != -1) {
url = url.substr(1);
}
if (url) {
var strs = url.split('&');
for (var i = 0; i < strs.length; i++) {
var srtArry = strs[i].split('=');
var y = srtArry.shift();
theRequest[y] = unescape(srtArry.join('='));
}
}
return theRequest;
}
五,获取从上个页面传递过来的参数,有以下两种方法:
1,this.$ route.query
A.vue
this.$router.push({
path: '/B', // B完整的path
query: {
number: '111111111111111',
cityNo: '21',
latitude: '31.24',
longitude: '121.67',
type: 'sssss'
}
});
B.vue
用this.$ route.query就可以获取A.vue中传递过来的参数,并且当前页面会显示带参数的完整的Url,刷新页面后参数依然存在
2,this.$ route.params:
A.vue
this.$router.push({
name: 'B',
params: {
number: '111111111111111',
cityNo: '21',
latitude: '31.24',
longitude: '121.67',
type: 'sssss'
}
});
B.vue
用this.$route.params就可以获取A.vue中传递过来的参数,但是当前页面的Url不会显示拼接的参数,并且刷新页面后参数不会存在
最后,大家有没有注意到在A.vue和B.vue中用到的分别是this.$ router和this.$ route,两者之家有什么区别呢?
this.$ router是全局路由对象,每个页面都可以调用push, go等方法
this.$route表示当前正在跳转的路由对象,可以调用其path, name, query, params等属性