路由跳转的三种方式 +跳转至第三方网站

H5实现跳转功能

点击按钮跳转三方网站
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

使用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可为正整数或负整数