Route 和 Router 的区别和使用

父组件

DANGER

传递用 useRouter

DANGER

注意！！ query:用path

DANGER

注意！！ params用name

<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,
      }
    })




 router.push({
      name: './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,
      }
    })




 router.push({
      name: './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>