this.route.query 和 this.$route.params 的使用

一、this.$route.query的使用

1、router/index.js 檔案

{ 
 path:'/bms',
 component: bms,
 //新增路由
 children:[
   {
    path:':shopid',
    component:guessdetail
   }
 ]     
}

2、傳參

this.$router.push({
        path: '/bms/detail', 
        query:{
          Id: id
         }
        });
 

3、獲取引數

this.$route.query.Id

案例：

// 傳參
TitleManagement(row) {
  this.$router.push({
    path: "/bms/topicList",
    query: {
      id: row.id
    },
  });
}
// 獲取引數
this.questionBankId = this.$route.query.id;

4、url的表現形式(url中帶有引數)

http://localhost:8080/#/mtindex/detail?Id=1

PS: 頁面之間用路由跳轉傳參時，重新整理跳轉後傳參的頁面，資料還會顯示存在

二、this.$route.params的使用

1、router/index.js 檔案

{
 path:'/bms',
 component: bms,
 //新增路由
 children:[
   {
    path:"/detail",
    name:'detail',
    component:guessdetail
   }
 ]     
}

2、傳引數（ params相對應的是name query相對應的是path）

this.$router.push({
  name: 'detail', 
  params:{
  Id: id
  }
});

3、獲取引數

this
 
.$route.params.Id

4、url的表現形式(url中沒帶引數)

http://localhost:8080/#/mtindex

PS: 頁面之間用路由跳轉傳參時，重新整理跳轉後傳參的頁面，資料不存在

this.$router與this.$route區別與聯絡

$router : 是路由操作物件，只寫物件

$route : 路由資訊物件，只讀物件

1,、this.$router是Vue Router的例項，包含了一些路由的跳轉方法，鉤子函式等.

想要導航到不同的url，則使用this.$router.push()$router物件是全域性路由的例項，是router構造方法的例項

路由例項方法:

• push(): push方法的跳轉會向 history 棧新增一個新的記錄，當我們點選瀏覽器的返回按鈕時可以看到之前的頁面。
• go(): 頁面路由跳轉 前進或者後退
• replace(): push方法會向 history 棧新增一個新的記錄，而replace方法是替換當前的頁面， 不會向 history 棧新增一個新的記錄。 一般使用replace來做404頁面

2、this.$route物件表示當前的路由資訊，包含了當前url解析得到的資訊，包含當前的路徑、引數、query物件等