本文講解了VUE專案中路由之間的傳值方式，涉及到的方法都是開發時常用的，希望對大家有多幫助，

1. 方式一：使用router-link標簽

1.1 params 傳參

首先定義好路由

const routes = [
    { path :  ‘/home’ , component : () => import(‘/../views/home.vue’) } ,
    { path :  ‘/about/:id’ , name : ’about’ , component: () => import(‘/../views/about.vue’) } 
]

在需要跳轉的home組件中使用 router-link 標簽

<router-link :to=”{ name : ’about’ , params : { id : 1} }”>跳轉</router-link>

在跳轉到的about組件中拿到傳過來的值
```
this.$route.params.id
```

小結：params傳參類似post，路由配置可以為 path : '/about/ : id’或 path : '/about : id’，

注意：如果不配置path的路由地址 :id ，那么第一次發起請求時可以拿到傳過來的值，但是重繪之后id會消失；配置了path后重繪頁面id會保留，

1.2 query傳參

首先定義好路由

const routes = [
    { path :  ‘/home’ , component : () => import(‘/../views/home.vue’) } ,
    { path :  ‘/about’ , name : ’about’ , component: () => import(‘/../views/about.vue’) } 
]

在需要跳轉的home組件中使用 router-link 標簽

<router-link :to=”{ name : ’about’ , query: { id : 1} }”>跳轉</router-link>

在跳轉到的about組件中拿到傳過來的值
```
this.$route.query.id
```

小結：query傳參類似于get，在url末尾會顯示傳過來的引數，路由地址可不配置，

注意：如果是html取參，用$route.query.id；如果是script取參，用this.$route.query.id，

總結：如果使用params傳參，要在path中配置好路由地址，不然頁面重繪后傳過來的引數會丟失；如果使用query傳參，則無需再path中配置路由地址，頁面跳轉后重繪也不會丟失引數，

2. 方式二：使用button按鈕和點擊時間@click

2.1 params 傳參

首先定義好路由

const routes = [
    { path :  ‘/home’ , component : () => import(‘/../views/home.vue’) } ,
    { path :  ‘/about/:id’ , name : ’about’ , component: () => import(‘/../views/about.vue’) } 
]

在需要跳轉的home組件中添加一個button按鈕，并增加點擊事件
```
<button @click=”change”>跳轉</button>
```

在change方法中使用this.$router.push進行頁面跳轉

change(){
    this.$router.push({
        name : “about” , 
        params : {id : 1}
    })
}

在about組件中拿到傳過來的值
```
this.$route.params.id　
```

小結：和使用router-link標簽類似，使用params就類似于post方法，需要配置好路由地址:id，才不會在重繪頁面后丟失資料，

2.2 query傳參

首先定義好路由

const routes = [
    { path :  ‘/home’ , component : () => import(‘/../views/home.vue’) } ,
    { path :  ‘/about’ , name : ’about’ , component: () => import(‘/../views/about.vue’) } 
]

在需要跳轉的home組件中添加一個button按鈕，并增加點擊事件
```
<button @click=”change”>跳轉</button>
```

在change方法中使用this.$router.push進行頁面跳轉

change(){
    this.$router.push({
        name : “about” , 
        query: {id : 1}
    })
}

或者：

change(){
    this.$router.push({
        path: “/about” , 
        query: {id : 1}
    })
}

在about組件中拿到傳過來的值
```
this.$route.query.id
```

小結：和使用router-link標簽類似，使用query就類似于get方法，不需要配置好路由地址:id，重繪頁面后資料也不會丟失，

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/554614.html

標籤：其他

上一篇：記錄--純CSS實作一個簡單又不失優雅的步驟條

下一篇：返回列表

VUE路由傳參的實用方式

1. 方式一：使用router-link標簽

1.1 params 傳參

1.2 query傳參

2. 方式二：使用button按鈕和點擊時間@click

2.1 params 傳參

2.2 query傳參