第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

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

VueRouter 路由傳參

1. 前言

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

2. params 傳參

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

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

使用 <router-link></router-link> 的方式跳轉(zhuǎn)路由：

 <!-- router-link 跳轉(zhuǎn) -->
<router-link :to="{name: 'detail', params: {name: 'React 基礎(chǔ)學(xué)習(xí)'}}">2. React 基礎(chǔ)學(xué)習(xí)</router-link>

具體示例：

實例演示
預(yù)覽 復(fù)制
復(fù)制成功！
<!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 計算屬性的學(xué)習(xí)'}}">
                  1. Vue 計算屬性的學(xué)習(xí)
                </router-link>
              </li>
              <li>
                <router-link :to="{name: 'detail', params: {name: 'React 基礎(chǔ)學(xué)習(xí)'}}">
                  2. React 基礎(chǔ)學(xué)習(xí)
                </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>
運(yùn)行案例 點擊 "運(yùn)行案例" 可查看在線運(yùn)行效果

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

使用 $router 的方式跳轉(zhuǎn)路由：

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

具體示例：

實例演示
預(yù)覽 復(fù)制
復(fù)制成功！
<!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 計算屬性的學(xué)習(xí)')">
                1. Vue 計算屬性的學(xué)習(xí)
              </li>
              <li @click="getDetail('React 基礎(chǔ)學(xué)習(xí)')">
                2. React 基礎(chǔ)學(xué)習(xí)
              </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>
運(yùn)行案例 點擊 "運(yùn)行案例" 可查看在線運(yùn)行效果

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

3. query 傳參

使用 query 傳參的方法相對簡單，只需要在對應(yīng)路由跳轉(zhuǎn)的時候傳入?yún)?shù)即可：
使用 <router-link></router-link> 的方式跳轉(zhuǎn)路由：

 <!-- router-link 跳轉(zhuǎn) -->
<router-link :to="{path: '/detail', query: { id: 1 }}">2. React 基礎(chǔ)學(xué)習(xí)</router-link>

具體示例：

實例演示
預(yù)覽 復(fù)制
復(fù)制成功！
<!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 計算屬性的學(xué)習(xí)
                </router-link>
              </li>
              <li>
                <router-link :to="{path: '/detail', query: {id: 2}}">
                  2. React 基礎(chǔ)學(xué)習(xí)
                </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>
運(yùn)行案例 點擊 "運(yùn)行案例" 可查看在線運(yùn)行效果

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

使用 $router 的方式跳轉(zhuǎn)路由：

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

具體示例：

實例演示
預(yù)覽 復(fù)制
復(fù)制成功！
<!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 計算屬性的學(xué)習(xí)</li>
              <li @click="getDetail(2)">2. React 基礎(chǔ)學(xué)習(xí)</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>
運(yùn)行案例 點擊 "運(yùn)行案例" 可查看在線運(yùn)行效果

代碼解釋：
在 JS 代碼第 19 行，我們定義了方法 getDetail，該方法通過 $router.push 跳轉(zhuǎn)到詳情頁面，并通過 query 傳入?yún)?shù) id。
在組件 Article 中，當(dāng)我們點擊課程名稱的時候調(diào)用 getDetail 方法。
在組件 Detail 中，我們通過 $route.query.id 把傳入的課程 ID 顯示出來。

4. 小結(jié)

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

  • 通過 params 傳遞參數(shù)。
  • 通過 query 傳遞參數(shù)。