vue.js 使用动态路由获取数据

ctrmrzij 于 2022-12-27 发布在 Vue.js

关注(0)|答案(2)|浏览(190)

我有一个目录项，通过单击生成一个slug并将其插入到NuxtLink中。
现在在组件中，我需要从数组中获取一个特定的元素，但是我在数组中没有slug，在id的帮助下，我将能够找到所需的元素，我没有向Nuxt路由提供任何id。
如果我能以某种方式获得所需元素的id，那么我该怎么做呢？
我觉得在pinia商店里记录下id是个坏主意。
在这种情况下他们一般会怎么做呢？我使用nuxt 3。

<NuxtLink class="catalog-item" :to="`catalog/${slug}`"></NuxtLink>

vue.js

来源：https://stackoverflow.com/questions/74903476/getting-data-with-dynamic-routing

2条答案

按热度按时间

t40tm48m1#

可以使用params属性将所需元素的id作为route参数传递。

<NuxtLink class="catalog-item" :to="`catalog/${slug}/${id}`"></NuxtLink>

然后，在单击NuxtLink时呈现的组件中，可以使用$ www.example.com属性访问id route参数route.params.id。

mounted() {
  const id = this.$route.params.id
  // use the id to get the desired element from the array
}

赞(0）回复(0）举报 2022-12-27

nxagd54h2#

我更喜欢通过组件中的 prop 解耦路由器参数。官方docs

props: {
        id: {
            type: Number,
            required: true,
        },
    },

然后在路由器文件中，您需要启用 prop ：

const routes = [{ path: '/user/:id', component: User, props: true }]

赞(0）回复(0）举报 2022-12-27

我来回答

vue.js 使用动态路由获取数据

2条答案

相关问题

热门标签

最新问答