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對象等