vue2页面跳转带值传参

最新推荐文章于 2025-11-05 22:16:25 发布

原创最新推荐文章于 2025-11-05 22:16:25 发布 · 1.1w 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue

vue-js 专栏收录该内容

10 篇文章

订阅专栏

这篇博客介绍了在Vue2中如何进行页面跳转并传递参数，包括通过`$router.push`在路径中附加参数，如在列表页跳转到详情页时将数据ID拼接在URL中，以及在详情页使用`jQuery.getUrlValue`解析获取参数。同时，还展示了在其他情况下如何封装方法传递复杂数据，并在目标页面如何通过`$route.query`获取查询参数。

//列表页

toDetail: function(e) {

var self = this;

var autoID = $(e.currentTarget).attr('data-id');

self.$router.push({path:"/friend-detail?userid="+autoID);

// 对象
this.$router.push({path: '/login?url=' + this.$route.path});

// 命名的路由
router.push({ name: 'user', params: { userId: 123 }})

// 带查询参数，变成/backend/order?selected=2
this.$router.push({path: '/backend/order', query: {selected: "2"}});

}

//封装的方法

$.extend({

/*获取Url值*/

getUrlValue: function(info){

var def;

if(typeof(arguments[1])=="undefined"){

def="";

}else{

def = argument[1];

}

var url =window.location.href;

var getSignInfo = url.substring(url.indexOf("?"));

var param = getSignInfo ;

if(param == ""){

return def;

}

var reg = new RegExp("(^|&)" + info + "=([^&]*)(&|$)","i");

var r = param.substr(1).match(reg);

if(r == null){

return def;

}

return (r[2]);

}



getQueryParam: function(name){

var reg = new RegExp("(^|&)" + name+ "=([^&]*)(&|$)","i");

var r = window.location.search.substr(1).match(reg);

if(r != null)

return unescape(r[2]);

return null;

}



});

//详情页

var FriendID = jQuery.getUrlValue('userID');

其他情况

传递

toDetail: function() {

var autoID = $(e.currentTarget).attr('data-id');

this.$router.push({path:"/chat",query: data);

}

获取

var obj = this.$route.query;