Nuxt 3安装脚本中的错误(旧)路由

Question

我想在Nuxt 3中组件的设置脚本中使用路由及其参数。在通过nuxt链接导航时，我遇到了一个问题，其中被路由到的组件的设置脚本中的路由是来自触发路由的组件的路由。

给定以下复制，我希望测试组件中的完整路径是/test，而不是/，无论组件是从浏览器还是从nuxt链接路由到。但是，在本例中，只有从浏览器或通过页面重新加载路由到时，路由才是正确的。

复制

npx nuxi init test

cd test

npm i

/app.vue

<template>
<div>
<router-view></router-view>
</div>
</template>

/pages/index.vue

<template>
<h1>index</h1>
<nuxt-link to="/test">to test</nuxt-link>
</template>

/页面/测试.vue

<template>
<h1>test</h1>
<p>Path: {{ fullPath }}</p>
</template>
<script setup lang="ts">
const fullPath = useRoute().fullPath;
console.log(fullPath);
</script>

Answer 1

Nuxt的内置useRoute需要使用<NuxtPage>，它是<router-view>的包装器，实际上应该取代<router-view>

app.vue

<template>
<div>
<NuxtPage />
</div>
</template>

NuxtPage文档

此时，您的代码的其余部分应该可以工作。

无论出于什么原因，如果你确实更喜欢使用<router-view>而不是<NuxtPage>，你仍然可以通过将vue路由器的useRoute导入到你的组件中来实现它。

测试.vue

import { useRoute } from 'vue-router';
const fullPath = useRoute().fullPath;
console.log(fullPath);