跳转传值

1、react18.3 跳转传值

• 2-1、路由传值

   import { useNavigate } from 'react-router-dom'
  
   export default function Home() {
   const navigate = useNavigate()
   const handlePutApply = () => {
   navigate('/about', { state: { name: 'aaa' }})
   }
   
   return (
   <button onClick={handlePutApply} >传递值</button>
   )
   }

• 2-2、 接收路由传值

   import { useLocation } from 'react-router-dom'
  
   export default function About() {
   let location = useLocation()
   const handlePutApply = () => {
   console.log('params:', location)
   }
   
   return (
   <button onClick={handlePutApply} >接收值</button>
   )
   }

2、小程序 跳转传值

• 2-1、组件传值
  1. wxml文件

      <button bind:tap="pageData">page传值</button>

  2. js文件

        pageData(){
           wx.navigateTo({
           url:"/pages/test/test?id=1&name=tom",
           })
        }

• 2-2、接收值

    onLoad: function (options) {
      console.log(options)//{id: "1", name: "tom"}
    }

3、vue3.5 跳转传值

• 3-1、 父组件传值写法

  <template>
    <button @click="toAbout">query传值</button>
  </template>

  <script setup lang="ts">

  import { useRouter } from 'vue-router'
  const router = useRouter()
  function toAbout() {
    router.push({ path: '/about', query: { userId: '123' }})
  }

  </script>

• 2-2、 子组件接收写法

   <template>
      <button @click="getRouterData">About</button>
    </template>
    
    <script setup lang="ts">
    
    import { useRoute } from 'vue-router'
    const route = useRoute()
    function getRouterData() {
      console.log(route.query)
    }
    
    </script>