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 Nuxt3Vue中的useRoute和useRouter有什么区别

推荐答案

Vue.js相关问答推荐

将 html 文件移出 dist vite 中的 src 文件夹

Nuxt3 / Vue3 - 当属性更改时如何动态更改渲染组件？

无法在cPanel/SSH上构建｜ Laravel + Vue优化

在 Vue.js 2.6 的 Javascript 中访问的内容

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

如何在vue中获取特定类别的产品列表

禁用 vue-cli webpack 编码图像 base64

如果 Vuetify 自动完成没有匹配的结果，则保留输入的文本

Vue.js 和观察者模式

自定义props类型

如何从我的 Vuetify 数据表中正确更新 Vuex 状态

Nuxt & Vuetify：如何控制 CSS 文件的加载顺序？

如何在 Vuex 中获取 Vue 路由参数？

交换数组项

基本 vue.js 2 和 vue-resource http 获取变量赋值

执行调度程序刷新期间未处理的错误，这可能是一个 Vue 内部错误

beforeCreate 挂钩中的 Vue 2.1 调用方法不起作用

使用 Vue 的点击编辑文本字段

如何将单选按钮绑定到 vuex store ？

为什么不能在 vue 模板中使用窗口？