亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

此間少年_ · 更新于 2020-12-08

VueRouter 路由傳參

1. 前言

本小節我們介紹 VueRouter 路由組件傳參。包括 params 傳參、query 傳參的兩種方式。路由傳參的知識點非常重要，在日常開發中，我們經常會通過路由傳遞各種參數，同學們在學完本節后可以將小節中的案例自己動手實現一遍，這樣才可以加深印象并熟練掌握。

2. params 傳參

使用 params 傳參數我們可以分為兩個步驟：

  1. 定義路由以及路由接收的參數。
  2. 路由跳轉時傳入對應參數。
    首先，我們先了解如何定義路由接收的參數：
const routes = [
  { path: '/detail/:name', name: 'detail', component: Detail },
]

使用 <router-link></router-link> 的方式跳轉路由：

 <!-- router-link 跳轉 -->
<router-link :to="{name: 'detail', params: {name: 'React 基礎學習'}}">2. React 基礎學習</router-link>

具體示例：

實例演示
預覽 復制
復制成功！
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div>
      <router-link to="/">首頁</router-link>
    </div>
    <router-view></router-view>
  </div>
</body>

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script type="text/javascript">

const Detail = Vue.component('detail', {
  template: '<div>這是 {{$route.params.name}} 的詳情頁面</div>'
})

const Article = Vue.component('myArticle', {
  template: `<ul>
              <li>
                <router-link :to="{name: 'detail', params: {name: 'Vue 計算屬性的學習'}}">
                  1. Vue 計算屬性的學習
                </router-link>
              </li>
              <li>
                <router-link :to="{name: 'detail', params: {name: 'React 基礎學習'}}">
                  2. React 基礎學習
                </router-link>
              </li>
            </ul>`
})

const routes = [
  { path: '/detail/:name', name: 'detail', component: Detail },
  { path: '/', component: Article }
]

const router = new VueRouter({
  routes: routes
})

var vm = new Vue({
  el: '#app',
  router: router,
  data() {
    return {}
  }
})
</script>
</html>
運行案例 點擊 "運行案例" 可查看在線運行效果

代碼解釋：
在 JS 代碼第 24 行，我們定義了路由 detail，他通過 params 接收一個參數 name。
在組件 Article 中，我們使用 <router-link> 鏈接要跳轉的路由并將參數傳入。
在組件 Detail 中，我們將傳入的課程名稱顯示出來。

使用 $router 的方式跳轉路由：

 // $router 跳轉
 this.$router.push({
  name: 'detail',
  params: {
    name: 'Vue 教程'
  }
})

具體示例：

實例演示
預覽 復制
復制成功！
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div>
      <router-link to="/">首頁</router-link>
    </div>
    <router-view></router-view>
  </div>
</body>

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script type="text/javascript">

const Detail = Vue.component('detail', {
  template: '<div>這是 {{$route.params.name}} 的詳情頁面</div>'
})

const Article = Vue.component('myArticle', {
  template: `<ul>
              <li @click="getDetail('Vue 計算屬性的學習')">
                1. Vue 計算屬性的學習
              </li>
              <li @click="getDetail('React 基礎學習')">
                2. React 基礎學習
              </li>
            </ul>`,
  methods: {
    getDetail(name) {
      this.$router.push({
        name: 'detail',
        params: {
          name: name
        }
      })
    }
  }
})

const routes = [
  { path: '/detail/:name', name: 'detail', component: Detail },
  { path: '/', component: Article }
]

const router = new VueRouter({
  routes: routes
})

var vm = new Vue({
  el: '#app',
  router: router,
  data() {
    return {}
  }
})
</script>
</html>
運行案例 點擊 "運行案例" 可查看在線運行效果

代碼解釋：
在 JS 代碼第 31 行，我們定義了路由 detail，他通過 params 接收一個參數 name。
在 JS 代碼第 19 行，我們定義了方法 getDetail，該方法通過 $router.push 跳轉到詳情頁面，并傳入 name 參數。
在組件 Article 中，當我們點擊課程名稱的時候調用 getDetail 方法。
在組件 Detail 中，我們將傳入的課程名稱顯示出來。

3. query 傳參

使用 query 傳參的方法相對簡單，只需要在對應路由跳轉的時候傳入參數即可：
使用 <router-link></router-link> 的方式跳轉路由：

 <!-- router-link 跳轉 -->
<router-link :to="{path: '/detail', query: { id: 1 }}">2. React 基礎學習</router-link>

具體示例：

實例演示
預覽 復制
復制成功！
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div>
      <router-link to="/">首頁</router-link>
    </div>
    <router-view></router-view>
  </div>
</body>

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script type="text/javascript">

const Detail = Vue.component('detail', {
  template: '<div>這是 id 為 {{$route.query.id}} 的詳情頁面</div>'
})

const Article = Vue.component('myArticle', {
  template: `<ul>
              <li>
                <router-link :to="{path: '/detail', query: {id: 1}}">
                  1. Vue 計算屬性的學習
                </router-link>
              </li>
              <li>
                <router-link :to="{path: '/detail', query: {id: 2}}">
                  2. React 基礎學習
                </router-link>
              </li>
            </ul>`
})

const routes = [
  { path: '/detail', component: Detail },
  { path: '/', component: Article }
]

const router = new VueRouter({
  routes: routes
})

var vm = new Vue({
  el: '#app',
  router: router,
  data() {
    return {}
  }
})
</script>
</html>
運行案例 點擊 "運行案例" 可查看在線運行效果

代碼解釋：
在組件 Article 中，我們使用 <router-link> 鏈接到要跳轉的路由并將參數傳入。
在組件 Detail 中，我們通過 $route.query.id 將傳入的課程 ID 顯示出來。

使用 $router 的方式跳轉路由：

 // $router 跳轉
 this.$router.push({
  path: '/detail',
  query: {
    id: 2
  }
})

具體示例：

實例演示
預覽 復制
復制成功！
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div>
      <router-link to="/">首頁</router-link>
    </div>
    <router-view></router-view>
  </div>
</body>

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script type="text/javascript">

const Detail = Vue.component('detail', {
  template: '<div>這是 id 為 {{$route.query.id}} 的詳情頁面</div>'
})

const Article = Vue.component('myArticle', {
  template: `<ul>
              <li @click="getDetail(1)">1. Vue 計算屬性的學習</li>
              <li @click="getDetail(2)">2. React 基礎學習</li>
            </ul>`,
  methods: {
    getDetail(id) {
      this.$router.push({
        path: '/detail',
        query: {
          id: id
        }
      })
    }
  }
})

const routes = [
  { path: '/detail', component: Detail },
  { path: '/', component: Article }
]

const router = new VueRouter({
  routes: routes
})

var vm = new Vue({
  el: '#app',
  router: router,
  data() {
    return {}
  }
})
</script>
</html>
運行案例 點擊 "運行案例" 可查看在線運行效果

代碼解釋：
在 JS 代碼第 19 行，我們定義了方法 getDetail，該方法通過 $router.push 跳轉到詳情頁面，并通過 query 傳入參數 id。
在組件 Article 中，當我們點擊課程名稱的時候調用 getDetail 方法。
在組件 Detail 中，我們通過 $route.query.id 把傳入的課程 ID 顯示出來。

4. 小結

本節，我們帶大家學習了路由傳參的兩種方式。主要知識點有以下幾點：

  • 通過 params 傳遞參數。
  • 通過 query 傳遞參數。