路由跳转的三种方式 +跳转至第三方网站+vue跳转新页面(新标签页打来) |
您所在的位置：网站首页 › vue关闭当前页面跳转 › 路由跳转的三种方式 +跳转至第三方网站+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 办公设备维修网 版权所有 豫ICP备15022753号-3 |