Vue.js - 路由 vue-router 的使用詳解2（參數傳遞）

一、使用冒號（:）的形式傳遞參數

1，路由列表的參數設置

（1）路由列表的 path 是可以帶參數的，我們在路由配置文件（router/index.js）里以冒號的形式設置參數。

（2）下面樣例代碼中，我在跳轉到歡迎頁面（/hello）時，帶有兩個參數：id 和 userName。

import Vue from 'vue'
import Router from 'vue-router'
import index from '@/components/index'  //引入首頁組件
import hello from '@/components/hello'  //引入歡迎頁組件
 
//Vue全局使用Router
Vue.use(Router)
 
export default new Router({
  routes: [ //配置路由，使用數組形式
    {
      path: '/',   //鏈接路徑
      name: 'index',  //路由名稱
      component: index  //映射的組件
    },
    {
      path: '/hello/:id/:userName',
      name: 'hello',
      component: hello
    }
  ]
})

2，參數的傳遞

（1）如果使用 <router-link> 組件跳轉的話，可以這么攜帶參數：

<router-link to="/hello/123/hangge">跳轉到 hello</router-link>

（2）如果使用 js 代碼跳轉的話，可以這么攜帶參數：

this.$router.push("/hello/123/hangge");

3，參數的獲取

頁面中通過 $route.params.xxx 獲取傳遞過來的數據。

<template>
  <div>
    <h1>ID：{{ $route.params.id}}</h1>
    <h1>用戶名：{{ $route.params.userName}}</h1>
  </div>
</template>

4，運行效果

可以看到點擊首頁鏈接進行跳轉后，參數成功傳遞並顯示。

　　 　　　

 

二、使用 query 方式傳遞參數

1，路由列表

query 方式類似 get 傳參，即通過 URL 傳遞參數。而路由列表的 path 不需要配置參數：

import Vue from  'vue'

import Router from  'vue-router'

import index from  '@/components/index'   //引入首頁組件

import hello from  '@/components/hello'   //引入歡迎頁組件

 

//Vue全局使用Router

Vue.use(Router)

 

export  default  new  Router({

   routes: [  //配置路由，使用數組形式

     {

       path:  '/' ,    //鏈接路徑

       name:  'index' ,   //路由名稱

       component: index //映射的組件

     },

     {

       path:  '/hello' ,

       name:  'hello' ,

       component: hello

     }

   ]

})

2，參數的傳遞

（1）如果使用 <router-link> 組件跳轉的話，可以這么攜帶參數：

<router-link :to="{path:'/hello', query:{id:123, userName:'hangge'}}">
  跳轉到 hello
</router-link>

（2）如果使用 js 代碼跳轉的話，可以這么攜帶參數：

this.$router.push({
  path:'/hello',
  query:{id:123, userName:'hangge'}
});

3，參數的獲取

頁面中通過 $route.query.xxx 獲取傳遞過來的數據。

<template>
  <div>
    <h1>ID：{{ $route.query.id}}</h1>
    <h1>用戶名：{{ $route.query.userName}}</h1>
  </div>
</template>

4，運行效果 

可以看到點擊首頁鏈接進行跳轉后，參數是自動拼接到 url 后面進行傳遞的。

三、使用 params 方式傳遞參數

1，路由列表

params 方式類似於 post 傳參，即傳遞的參數不會顯示在 URL 上。同上面的 query 方式一樣，路由列表的 path 不需要配置參數：

import Vue from 'vue'
import Router from 'vue-router'
import index from '@/components/index'  //引入首頁組件
import hello from '@/components/hello'  //引入歡迎頁組件
 
//Vue全局使用Router
Vue.use(Router)
 
export default new Router({
  routes: [ //配置路由，使用數組形式
    {
      path: '/',   //鏈接路徑
      name: 'index',  //路由名稱
      component: index//映射的組件
    },
    {
      path: '/hello',
      name: 'hello',
      component: hello
    }
  ]
})

2，參數的傳遞

注意：params 只能用 name 來引入路由，而不能用 path。

（1）如果使用 <router-link> 組件跳轉的話，可以這么攜帶參數：

<router-link :to="{name:'hello', params:{id:123, userName:'hangge'}}">
  跳轉到 hello
</router-link>

（2）如果使用 js 代碼跳轉的話，可以這么攜帶參數：

this.$router.push({
  name:'hello',
  params:{id:123, userName:'hangge'}
});

3，參數的獲取

頁面中通過 $route.params.xxx 獲取傳遞過來的數據。

<template>
  <div>
    <h1>ID：{{ $route.params.id}}</h1>
    <h1>用戶名：{{ $route.params.userName}}</h1>
  </div>
</template>

4，運行效果

可以看到這種方式，參數的傳遞不會拼接到 url 后面。

 

附：使用 props 實現參數解耦 

    從上面的樣例可以看出，當路由攜帶參數跳轉時，頁面這邊通過 $route.params.xxx 或 $route.query.xxx 來獲取傳遞過來的數據。但這樣有個問題，由於組件中使用 $route 會使之與其對應路由形成高度耦合，從而使組件只能在某些特定的 URL 上使用，限制了其靈活性。

    要解決這個問題，我們可以使用 props 將組件和路由解耦。props 共有如下三種模式。

 

1，布爾模式

（1）直接將路由配置中的 props 屬性被設置為 true，那么參數將會被設置為組件屬性。

export default new Router({
  routes: [ //配置路由，使用數組形式
    {
      path: '/',   //鏈接路徑
      name: 'index',  //路由名稱
      component: index  //映射的組件
    },
    {
      path: '/hello/:id/:userName',
      name: 'hello',
      component: hello,
      props: true
    }
  ]
})

（2）然后我們頁面組件這邊不再需要通過 $route.params.xxx 或 $route.query.xxx 來獲取傳遞過來的數據。

<template>
  <div>
    <h1>ID：{{ id }}</h1>
    <h1>用戶名：{{ userName}}</h1>
  </div>
</template>
 
<script>
  export default {
    name: 'hello',
    props: ['id', 'userName']
  }
</script>

2，對象模式

（1）我們可以將 props 設置為一個對象，對象內容會被設置為組件屬性。這種方式常用來配置靜態參數。

export default new Router({
  routes: [ //配置路由，使用數組形式
    {
      path: '/',   //鏈接路徑
      name: 'index',  //路由名稱
      component: index  //映射的組件
    },
    {
      path: '/hello',
      name: 'hello',
      component: hello,
      props: {
        id: 1234,
        userName: "hangge"
      }
    }
  ]
})

（2）然后頁面組件這邊獲取數據方式和前面一樣。

<template>
  <div>
    <h1>ID：{{ id }}</h1>
    <h1>用戶名：{{ userName}}</h1>
  </div>
</template>
 
<script>
  export default {
    name: 'hello',
    props: ['id', 'userName']
  }
</script>

3，函數模式

（1）我們還可以創建一個函數返回 props，在函數中對參數值進行處理，或者將靜態值與基於路由的值結合。

function dynamicPropsFunc (route) {
  return {
    message: "歡迎您：" + route.params.userName
  }
}
 
export default new Router({
  routes: [ //配置路由，使用數組形式
    {
      path: '/',   //鏈接路徑
      name: 'index',  //路由名稱
      component: index  //映射的組件
    },
    {
      path: '/hello',
      name: 'hello',
      component: hello,
      props: dynamicPropsFunc
    }
  ]
})

（2）這里假設我們使用 JS 進行跳轉，代碼如下：

this.$router.push({
  name:'hello',
  params:{id:123, userName:'hangge'}
});

 

（3）目標頁面組件代碼，以及運行結果如下：

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>
 
<script>
  export default {
    name: 'hello',
    props: ['message']
  }
</script>