、前言

前面寫了一篇react-router的簡單應用的文章，講的是如何實現網頁內容切換跳轉的方法：

React 路由 react-router 入門實踐

本文新增跳轉的同時，攜帶傳參的處理方法

二、代碼

當URL和Route匹配時，Route會創建一個match對象作為props中的一個屬性傳遞給被渲染的組件，里邊的params屬性便是路由跳轉攜帶的值。

1.頁面組件

Index.js

import React, { Component, Fragment } from 'react'

class import React, { Component, Fragment } from 'react'

class Index extends Component {
    constructor(props) {
        super(props)
        this.state = {}
    }
    render() {
        return (
            <Fragment>
                <h2>首頁</h2>
            </Fragment>
        )
    }

}
export default Index;

 extends Component {
    constructor(props) {
        super(props)
        this.state = {}
    }
    render() {
        return (
            <Fragment>
                <h2>首頁</h2>
            </Fragment>
        )
    }

}
export default Index;

AmericaPage.js

import React, { Component, Fragment } from 'react'

class AmericaPage extends Component {
    constructor(props) {
        super(props)
        this.state = {}
    }
    render() {
        return (
            <Fragment>
                <h2>美國{this.props.match.params.product}</h2>
            </Fragment>
        )
    }

}
export default AmericaPage;

ChinaPage.js

import React, { Component, Fragment } from 'react'

class ChinaPage extends Component {
    constructor(props) {
        super(props)
        this.state = {}
    }
    render() {
        return (
            <Fragment>
                <h2>中國{this.props.match.params.product}</h2>
            </Fragment>
        )
    }

}

export default ChinaPage;

2.路由規則傳參

import React from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import AmericaPage from './pages/AmericaPage'
import ChinaPage from './pages/ChinaPage'
import Index from './pages/Index'

function AppRouter() {
    return (
        <Router>
            <ul>
                <li><Link to="/">首頁</Link></li>
                <li><Link to="/america/apple">美國</Link></li>
                <li><Link to="/china/huawei">中國</Link></li>
            </ul>
            <Route path="/" exact component={Index} />
            <Route path="/america/:product" component={AmericaPage} />
            <Route path="/china/:product" component={ChinaPage} />
        </Router>
    );
}
export default AppRouter;

三、效果

可見，傳遞了參數 product，并進行頁面展示：

四、其他

我們也經常通過js的方式，history.push進行路由切換，而單通過 html

首先我們回顧一下vue2中父子組件是怎么傳值的，然后對比vue3進行詳解。

一、vue2中父子組件傳值

<!-- 父組件 -->
<template>
    <div>
  		// name：父組件把值傳給子組件test-child
  		// childFn：子組件傳遞值給父組件的自定義方法
      <test-child :name="name" @childFn="parentFn"></test-child>
      子組件傳來的值 : {{message}}
    </div>
</template>

<script>
export default {
    data() {
        return {
          message: '',
          name: '張三'
        }
    },
    methods: {
      // 接收子組件的傳值
       parentFn(payload) {
         this.message = payload;
       }
    }
}
</script>

<!-- 子組件 -->
<template> 
    <div>
  			{{name}}
        <input type="text" v-model="message" />
        <button @click="click">發送消息給父組件</button>
    </div>
</template>
<script>
export default {
		props:{
      name:{
        type:String,
        default:''
      }
    }
    data() {
        return {
          message: '我是來自子組件的消息'
        }
    },
    methods: {
      click() {
            // 1、childFn 組件方法名，請對照父組件
            // 2、message是傳遞給父組件的數據
            this.$emit('childFn', this.message);
        }
    }    
}
</script>

上面的代碼可以看到我們vue2中父子組件之間傳值是通過prop傳值給子組件，子組件通過$emit把值傳遞給父組件進行交互。那么我們下面看看vue3中是如何進行組件之間傳值的。

二、provide & inject

vue3提供了provide() 和 inject() 兩個方法，可以實現組件之間的數據傳遞。父級組件中使用 provide() 函數向子組件傳遞數據；子級組件中使用 inject() 獲取父組件傳遞過來的數據。代碼如下：

<!-- 父組件 -->
<template>
  <div id="app">
    <test-child></test-child>
  </div>
</template>
<script>
import testChild from './components/testChild'
// 1. 按需導入 provide
import { provide } from '@vue/composition-api'
export default {
  name: 'app',
  setup() {
    //  App 根組件作為父級組件，通過 provide 函數向子級組件共享數據（不限層級）
    //  provide('要共享的數據名稱', 被共享的數據)
    provide('color', 'red')
  },
  components: {
    testChild
  }
}
</script>

<template>
  <div>
  <!--  通過屬性綁定，為標簽設置字體顏色 -->
  <h3 :style="{color: themeColor}">Level One</h3>
</div>
</template>
<script>
import { inject } from '@vue/composition-api'
export default {
  setup() {
    // 調用 inject 函數時，通過指定的數據名稱，獲取到父級共享的數據
    const themeColor = inject('color')
    // 把接收到的共享數據 return 給 Template 使用,進行數據渲染
    return {
      themeColor
    }
  }
}
</script>

通過上面的代碼我們可以發現，vue3中數據傳值更加簡單了，不用再引入子組件標簽上寫屬性，直接通過provide()設置指定的名稱，可以在子組件中通過inject()拿到，是不是感覺很簡單呢。