前端Vue路由跳转,项目路径和外网/内网路径跳转新页面传参

54 篇文章 2 订阅
47 篇文章 1 订阅

第一种 本项目路径跳转

本项目路径跳转传参数

传参组件

let routeData = this.$router.push({
    path: '/home',
        query: {
            lang: lang,
        },
});
window.open(routeData.href, '_blank');

接收参数组件

//this.$route.query.XXX // XXX代表接受的参数
//this.$route.query.lang
// 	注意:接收,需要判断一下,传过的参数是否有效参数
//  注意:	必须用created()声明周期才可以获取到,mounted()获取不到参数 !!!!!!!!!
created () {
	let lang = this.$route.query.lang
	if (lang == 'zh-cn' && 'en-us') {
	    localStorage.setItem('lang', lang);
	    this.$i18n.locale = lang
	}
}

第二种 获取接口内网路径跳转

这个难点,当时没想出来!!!

获取接口内网路径类似www.baidu.com,跳转带参数

传参组件

 this.$axios({
        method: 'post',
        url: 'https://www.baidu.com/view_api/creator/queryCreatorUrl',
     }).then(res => {
           // console.log(lang, 'lang');
           let lang = localStorage.getItem('lang')
           let url = `${res.data.data}`
           window.open(`${url}?lang=${lang}`, '_blank') // 主要这一步拼接路径!!!
         }, err => {
           console.log(err);
         })

接收参数组件

//this.$route.query.XXX // XXX代表接受的参数
//this.$route.query.lang
// 	注意:接收,需要判断一下,传过的参数是否有效参数
//  注意:	必须用created()声明周期才可以获取到,mounted()获取不到参数 !!!!!!!!!
created () {
	let lang = this.$route.query.lang
	if (lang == 'zh-cn' && 'en-us') {
	    localStorage.setItem('lang', lang);
	    this.$i18n.locale = lang
	}
}

最后

感觉文章好的话记得点个心心和关注和收藏,有错的地方麻烦指正一下,如果需要转载,请标明出处,多谢!!!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值