Vue <router-link>未在URL中附加参数

Question

在我的路由器链接中，我需要设置id参数，该参数会附加在Vue inspect中，而不是附加在URL中。

<router-link
            :to="{ name: 'app-gateway-airport', params: { id: slotProps.row.id } }"
            class="mr-2 rounded border boder-button-border w-8 h-8 flex flex-row items-center justify-center cursor-pointer">
  <delete-icon />
</router-link>

slotProps.row.id 该变量设置正确。

它没有在URL中附加id参数。

Answer 1

要使用参数，必须配置route with dynamic component

在Nuxt.js中，您无需手动定义路由配置，而是由文件夹/文件结构生成路由配置。为了使视图动态（具有一些参数），您需要遵循naming convention of Nuxt-在这种情况下，（目标）视图组件应命名为useEffect( () => { const subscription = props.source.subscribe(); return () => { subscription.unsubscribe(); }; }, [props.source], );

另外，在创建链接时，请确保设置正确的路由名称：_id.vue（在Nuxt中，您应该使用<nuxt-link :to="{name: 'app-gateway-airport-id', params: { id: slotProps.row.id }}">而不是<nuxt-link>）