前端 页面跳转 路由带参数的各种情况

新页面跳转，且url的参数必传，如果缺少参数页面空白，不显示内容。

let routeUrl = this.$router.resolve({
  path: `/industry/${this.idx}`//有多个的话就继续按照这个格式拼接
});
window.open(routeUrl.href, '_blank')//第二个值决定的 后面会讲本页面跳转

跳转的新页面取值方法

mounted(){
  this.id = this.$route.params.id;//这个params.id的id取决于你在router中的index.js命名
}

route:[
  {
      path:"/industry/:id",//这个id对应取值那个params.id
      name:"IndustryDetail",
      component:IndustryDetail,
      meta:{
        title:""
      },
      props: true,
   },
]

本页面跳转，且url参数可传可不传，缺少参数也不影响页面显示。

let routeUrl = this.$router.resolve({
  path: '/industry',
    params:{
      id:this.id,
      type:this.type,
    }//有多个的话就继续按照这个格式拼接
});
window.open(routeUrl.href, '_self')//新页面打开还是本页面打开只由第二个值决定

跳转的新页面取值方法

mounted(){
    this.id = this.$route.query.id;//这个query.id的id取决于你在跳转来的那个页面中的params内的字段命名
    this.type = this.$route.query.type;
}

route中配置只需要这样写，不需要带参数

route:[
  {
      path:"/industry",
      name:"IndustryDetail",
      component:IndustryDetail,
      meta:{
        title:""
      },
      props: true,
   },
]

本文举例说明了两种情况，一共有4种情况，请各位使用时根据自己的需要进行改变。