前端 頁面跳轉 路由帶參數的各種情況

新頁面跳轉，且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種情況，請各位使用時根據自己的需要進行改變。