【Nuxt】编程式导航和动态路由

编程式导航

navigateTo：

更多用法：navigateTo

<template>
  <div class="app-container">
    <button @click="goToCategory">Category</button>
    <NuxtPage/>
  </div>
</template>
<script setup>
const goToCategory = () => {
  // 1. 直接传递一个路径参数
  // return navigateTo('/category')
  // 2. 传递一个对象
  // return navigateTo({
  //   path: '/category',
  //   query: {id: 1}
  // }, {
  //   replace: true
  // });
  // 3. 再传递一个 options 配置项
  // 4. 直接跳转到外部链接
  return navigateTo('https://www.baidu.com', {
    external: true
  })
}
</script>

除了可以使用navigateTo，还支持 useRouter（用法相同） 进行编程式导航。

动态路由

通过 useRoute() 可以获取动态参数（route.params）。

查询字符串参数通过 route.query 获取。