路由跳转的三种方式 +跳转至第三方网站+vue跳转新页面(新标签页打来)

H5实现跳转功能

点击跳转新标签页&&新标签页打开

<el-button @click="largeScreenShow" type="primary" size="small">
</el-button>
//第一步定义routeUrl
let routeUrl = this.$router.resolve({
        path: "/largeScreenQuotaion",
        query: {
          id: this.goodQuery.offlineAuctionId,
        },
 });
第二步：新标签页打开
window.open(routeUrl.href, "_blank");

点击按钮跳转三方网站

1.点击按钮跳转至第三方网站查询物流

页面显示：

 <van-button
      plain
      @click="checkExpress(item.express_code, item.express_no)"
  >查看物流</van-button>

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：在新标签页打开该链接

<a :href="item.invoice_url" target="_blank">{{item.invoice_no}}</a>

路由跳转

1.使用router-link

不加参数

//name + 路由的name属性
 <router-link :to="{name:'proDetail'}">``
 //path + 路由的path属性
 <router-link :to="{path:'/home'}"> 

使用params传参

// 第一步：存参
 <router-link :to="{name:'home', params: {info:this.info}}">
 // 第二步：路由配置
 path: "/home/:info"  或者 path: "/home:info"
 // 第三步：取参
 this.$route.params.info
 //注意：使用params传参的话只可以使用name进行路由跳转！
 //如果你是用path进行理由跳转的参数会报undefied的错哦

使用query传参

// 第一步：存参
 <router-link :to="{name:'home', query: {info:this.ifo}}">
 // 第二步：取参
 this.$route.query.info

params存参与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.$router.push()、this.$router.replace()、this.$router.go(n)()三者的区别：this.$router.push
跳转到指定url路径，并想history栈中添加一个记录，点击后退会返回到上一个页面
this.$router.replace跳转到指定url路径，但是history栈中不会有记录，点击返回会跳转到上上个页面(就是直接替换了当前页面)this.$router.go(n)
向前或者向后跳转n个页面，n可为正整数或负整数