vue.js 对路由传参封装

前言：很多项目会要用到路由传参，对于参数较多且形式较为单一的传参，我们可以将其封装成为一个公用的方法，有利于代码整洁且不易于出错。

以uni-app为实例:

1. 先在公共util.js文件里面写好参数方法：

export default {
    //封装的参数传递函数
	stringify(data) {
		if (!data) {
			return '';
		}
		var _str = '?';
		const len = Object.keys(data).length;
		Object.keys(data).forEach((key, index) => {
            console.log(key,data[key]); //输出结果 id 123      type info
			_str += `${key}=${(data[key] || '')}${index < len - 1 ? '&' : ''}`;
		});
		console.log(_str);  //输出结果 ?id=123&type=info
		return _str;
	}
}

2. 路由路径+要传递的参数(使用封装在util.js文件里的stringify方法)：

        goTo(item) {
            uni.navigateTo({
                // this.$util.stringify 是封装在util.js文件里的stringify方法
                url:'/pages/lemon/detail' + this.$util.stringify({
                        id: item.id,
                        type: item.type
                }),
            });
        },

3.结果： 

地址栏：http://localhost:8080/#/pages/lemon/detail?id=123&type=info

打印效果：?id=123&type=info