Route和Router的区别和使用

父组件

DANGER

传递用 useRouter

<template>
    <el-button type="primary" @click="submitForm(ruleFormRef)">
      登入
   </el-button>
</template>

<script setup>
import { ref, reactive, } from 'vue'
import { useRouter, useRoute } from 'vue-router'
 
const router = useRouter()
const toten=ref('0000000000000')
function submitForm(){
 router.push({
      path: './Home_list',
      query: {
        params: toten.value,
      }
    })
}
   

</script>

<template>
    <el-button type="primary" @click="submitForm(ruleFormRef)">
      登入
   </el-button>
</template>

<script setup>
import { ref, reactive, } from 'vue'
import { useRouter, useRoute } from 'vue-router'
 
const router = useRouter()
const toten=ref('0000000000000')
function submitForm(){
 router.push({
      path: './Home_list',
      query: {
        params: toten.value,
      }
    })
}
   

</script>

DANGER

接收用 useRoute

子组件

<template>
  <div>
    totek:{{route.query.params  }}
  </div>
</template>

<script setup>
 import { ref, reactive, } from 'vue'
import { useRouter, useRoute } from 'vue-router'
const route=useRoute()
console.log(route.query.params,'111s');
</script>

<style lang="scss" scoped>

</style>

<template>
  <div>
    totek:{{route.query.params  }}
  </div>
</template>

<script setup>
 import { ref, reactive, } from 'vue'
import { useRouter, useRoute } from 'vue-router'
const route=useRoute()
console.log(route.query.params,'111s');
</script>

<style lang="scss" scoped>

</style>