Vue 切換不一樣的路由參數使用一個路由

當前的需求:

  點擊tab頁籤中的不一樣的tab，給router-view組建中傳值不一樣的路由參數，實如今同一個路由中顯示不一樣的數據。

解決方法

• 使用路由的path進行切換
    將當前須要切換的路由的path設置爲 '/path/:id', 在tab頁中點擊不一樣的tab 改變 id的值，使用 this.$router.push({path: '/path/${id}'})進行路由跳轉

  • 路由配置信息：

    

  • 跳轉路由：

    

使用此方法，url上的參數會進行變化，參數會有/path/id1 改變爲 path/id2

• 使用路由的 name進行切換

當使用 name進行切換時，傳遞的參數不能爲params，params在第一次進來時已經被緩存了，並不會觸發鉤子函數。 使用name進行切換時，當前的url 不會進行改變

  使用name進行切換時，必須使用query的參數，才能給實現路由的變化，隨後在子組件中監督$route的變化，改變從路由傳遞過來的參數值