vue根據引數不同的路由跳轉以及name的作用

2022-08-27 07:36:10 字數 2383 閱讀 5505

最近在做vue路由跳轉根據引數的值不同但是跳轉的是同乙個路由的功能。點選左邊的目錄,根據目錄id跳轉不同的列表。如下圖。

路由跳轉的**:

this.$router.push(})

也可以這麼寫

this.$router.push(})

這兩種其實都可以跳轉到想要的路由。

但是我如果想要根據id的值不同而去跳轉相同的路由,以下是id不同。

this.$router.push(})

和this.$router.push(})

但是當我點選跳轉的時候右邊的列表是沒有重新整理的。因為路由沒有變化。雖然資料發生了變化,但是呼叫的依然是同乙個元件,元件復用了所以不重新整理。所以這時候就要使用不同的路由來跳轉。下面在路由後面新增引數的值就可以讓路由變化從而重新重新整理頁面。

this.$router.push(})

和this.$router.push(})

此時還需要修改index.js裡面的配置檔案,路由後面加上:id

path: '/rfindex/resourcelist/:id',

這樣子點選左邊目錄的時候,此時的路由並不是我想要的,因為根據id的不同路由始終是:id。

此時加上name屬性,

this.$router.push(})

再修改index.js

name: '資源列表',path: '/rfindex/resourcelist',

再點選目錄訪問頁面,發現url正常了,還不是我想要的結果。因為就算路由發生了變化,資料還是沒有變化。

因為vue每次呼叫元件的時候會觀察是否已經created,而我的元件是已經created的,所以當我id發生變化的時候,元件沒有重新建立。因此要在元件中再加上乙個方法。把自己要處理的資料寫在next()之後。

beforerouteupdate (to, from, next) else })

也可以這麼寫

this.$router.push(})

這兩種其實都可以跳轉到想要的路由。

但是我如果想要根據id的值不同而去跳轉相同的路由,以下是id不同。

this.$router.push(})

和this.$router.push(})

但是當我點選跳轉的時候右邊的列表是沒有重新整理的。因為路由沒有變化。雖然資料發生了變化,但是呼叫的依然是同乙個元件,元件復用了所以不重新整理。所以這時候就要使用不同的路由來跳轉。下面在路由後面新增引數的值就可以讓路由變化從而重新重新整理頁面。

this.$router.push(})

和this.$router.push(})

此時還需要修改index.js裡面的配置檔案,路由後面加上:id

path: '/rfindex/resourcelist/:id',

這樣子點選左邊目錄的時候,此時的路由並不是我想要的,因為根據id的不同路由始終是:id。

此時加上name屬性,

this.$router.push(})

再修改index.js

name: '資源列表',path: '/rfindex/resourcelist',

再點選目錄訪問頁面,發現url正常了,還不是我想要的結果。因為就算路由發生了變化,資料還是沒有變化。

因為vue每次呼叫元件的時候會觀察是否已經created,而我的元件是已經created的,所以當我id發生變化的時候,元件沒有重新建立。因此要在元件中再加上乙個方法。把自己要處理的資料寫在next()之後。

beforerouteupdate (to, from, next) else {

this.tabledata = tableapi.tabledata

這樣就可以根據id的不同跳轉路由復用同乙個元件。

原文有茶就喝茶

Vue路由跳轉傳遞引數()

需求 在單頁應用中,從a頁面跳轉到b頁面需要攜帶部分引數,具體操作方法有以下幾種 方法1 使用 router進行跳轉 step1 在router.js中定義攜帶引數的名稱 step2 在a頁面跳轉時攜帶引數 let id 0 this.router.push step3 在b頁面接收引數 let i...

vue路由跳轉傳引數

1.router link link to query link 1.path 是要跳轉的路由路徑,也可以是路由檔案裡面配置的 name 值,兩者都可以進行路由導航 2.params 是要傳送的引數,引數可以直接key value形式傳遞 3.query 是通過 url 來傳遞引數的同樣是key v...

Vue路由帶引數跳轉

path 是要跳轉的路由路徑 推薦換成 name 值,name pathname 命名路由,兩者都可以進行路由導航 params 是要傳送的引數,引數可以直接 key value 形式傳遞 類似post query 是通過 url 來傳遞引數的同樣是 key value 形式傳遞 類似get 重新整...