路由跳转的三种方式 +跳转至第三方网站+vue跳转新页面(新标签页打来) | 您所在的位置:网站首页 › 第三方上p站 › 路由跳转的三种方式 +跳转至第三方网站+vue跳转新页面(新标签页打来) |
H5实现跳转功能
点击跳转新标签页&&新标签页打开
//第一步定义routeUrl
let routeUrl = this.$router.resolve({
path: "/largeScreenQuotaion",
query: {
id: this.goodQuery.offlineAuctionId,
},
});
第二步:新标签页打开
window.open(routeUrl.href, "_blank");
点击按钮跳转三方网站
1.点击按钮跳转至第三方网站查询物流
页面显示: 查看物流js代码: checkExpress(express_code, express_no) { window.location.href = "https://www.kuaidi100.com/chaxun?com=" + express_code + "&nu=" + express_no; }, //刷新当前页面 window.location.reload(); 2. a标签使用href跳转将后端返回的数据赋值给href属性 target:_blank:在新标签页打开该链接 {{item.invoice_no}} 路由跳转 1.使用router-link 不加参数 //name + 路由的name属性 `` //path + 路由的path属性 使用params传参 // 第一步:存参 // 第二步:路由配置 path: "/home/:info" 或者 path: "/home:info" // 第三步:取参 this.$route.params.info //注意:使用params传参的话只可以使用name进行路由跳转! //如果你是用path进行理由跳转的参数会报undefied的错哦 使用query传参 // 第一步:存参 // 第二步:取参 this.$route.query.infoparams存参与query存参的区别: query存的参数会在url地址中显示出来;query可以不用设置路由 2. this.$router.push() 不带参数 this.$router.push('/itworkDetail') this.$router.push({name:'itworkDetail'}) this.$router.push({path:'/itworkDetail'}) 使用params传参 // 存参 this.$router.push({name:'home',params: {info:this.info}}) // 只能用 name // 取参 // html 取参 $route.params.info // script 取参 this.$route.params.info 使用query传参 // 传参 this.$router.push({name:'home',query: {info:this.info}}) this.$router.push({path:'/home',query: {info:this.info}}) // 取参 // html 取参 $route.query.info // script 取参 this.$route.query.info 3. this.$router.replace()方法同上,push 4. this.$router.go(n) // 回退到上一页 this.$router.go(-1)this. r o u t e r . p u s h ( ) 、 t h i s . router.push()、this. router.push()、this.router.replace()、this. r o u t e r . g o ( n ) ( ) 三 者 的 区 别 : t h i s . router.go(n)()三者的区别: this. router.go(n)()三者的区别:this.router.push 跳转到指定url路径,并想history栈中添加一个记录,点击后退会返回到上一个页面 this. r o u t e r . r e p l a c e 跳 转 到 指 定 u r l 路 径 , 但 是 h i s t o r y 栈 中 不 会 有 记 录 , 点 击 返 回 会 跳 转 到 上 上 个 页 面 ( 就 是 直 接 替 换 了 当 前 页 面 ) t h i s . router.replace 跳转到指定url路径,但是history栈中不会有记录,点击返回会跳转到上上个页面 (就是直接替换了当前页面) this. router.replace跳转到指定url路径,但是history栈中不会有记录,点击返回会跳转到上上个页面(就是直接替换了当前页面)this.router.go(n) 向前或者向后跳转n个页面,n可为正整数或负整数 |
CopyRight 2018-2019 实验室设备网 版权所有 |