Vue.js Nuxt3Vue中的useRoute和useRouter有什么区别

发布于07月04日

我想了解，两者之间的区别是什么

const Route = useRoute()

和

const Router = useRouter()

在NUXT3/视图中.

此外，我不能正确使用路由.

在提交时，我想使用推送到另一个带有查询字符串的页面.

<template>
  <button @click="SearchTaxi"></button>
</template>

<script setup>
import { ref } from 'vue'
const router = useRouter()
const pickuppoint = ref('')
const dropoffpoint = ref('')

const SearchTaxi = () => {
router.push({
  path: `/airport-transfers/results?pickuppoint=${pickuppoint.value}&dropoffpoint=${dropoffpoint.value}`})
}
</script>

我希望路由改为

"url/airport-transfers/results?pickuppoint=XXXX&dropoffpoint=XXXX"

但我正在

"url/airport-transfers/results"

推荐答案

有两件事:

路由，其中将包含与路径、主机名、当前查询参数等相关的所有信息...
路由，实际的Vue路由，将为您提供所有功能，如客户端导航(push或replace)，回滚到n-1，解决等...

You can check the API: https://router.vuejs.org/api/
And see which methods/fields are available on each one of them.

如果要推送一些查询参数和新路径，可以使用以下命令

router.push({
  path: '/airport-transfers/results',
  query: { 
    pickuppoint: pickuppoint.value,
    dropoffpoint: dropoffpoint.value
  }
})

如本文所述:https://router.vuejs.org/guide/essentials/navigation.html#navigate-to-a-different-location

Vue.js相关问答推荐

如何将 cogo toast PRIVE集成到nuxt3中？

设置Vite Vue 3需要多个应用程序输出目录

在哪里可以找到在线沙箱 Vuetify 3 模板来创建最小的可重现示例？

Vue 3组合式API如何测试是否发出正确的事件

绑定事件在渲染函数中不起作用

：deep() 带有嵌套 scss 规则的语法

如何在 VUE.js 中重新刷新时保持多层 b-collapse 菜单打开？

在 Vuejs 中Watch观察 window.scrollY 的变化

如何有条件地更改 vue/vuetify 文本字段 colored颜色

如何在某些异步数据(在 Vuex 存储中)加载之前防止任何路由？

Vuejs 2，VUEX，编辑数据时的数据绑定

如何判断 Vue 组件是否处于活动状态

等待来自 WDS 的更新信号

异步方法不等待函数

Vue组件未在laravel 5.3中使用Passport 显示

Vue JS 在渲染前等待数据

我如何能够在 vue js html 中以给定格式进行多项 Select 和传递数据？

使用 vuejs 动态设置 id 标签

如何修复套接字 io 中的 400 错误错误请求？

如何隔离 Vuetify 全局样式

实用课程推荐