我想使用 Vue Router 将 ID 作为参数传递,但我遇到了麻烦

I want to pass an ID as a params with Vue Router, but I'm having trouble

提问人:Saruhan 提问时间:11/10/2023 更新时间:11/10/2023 访问量:41

问:

我有一个文章视图和sideBarRight组件。

在 SideBarRight 组件中 -

<v-chip-group>
     <v-chip v-for="tag in tags" :key="tag" :item-id="tag.id" @click="chipClick(tag.id)">
     {{ tag.articleName }}
     </v-chip>
</v-chip-group>
.
.
.
methods:{
   chipClick(itemId) {
      this.$router.push({name: 'article', params: { itemId }});
      }
}

我的路由器如下所示:

{
     path: "/article/:itemId",
     name: "article",
     component: () =>
         import("../views/ArticleView.vue")
}

我想在单击筹码时进行导航并将 itemId 传递给视图。我不确定如何实现这一目标。有没有特定的钩子?

javascript vue.js 前端 vue-router 路由器

评论

0赞 yoduh 11/10/2023
路由参数将从组件访问为this.$route.params
0赞 imhvost 11/10/2023
this.$router.push( { name: 'article', params: { itemId: itemId } } );
0赞 Saruhan 11/10/2023
我已经这样做了。参数已成功访问。但是,并非在每条路线上都会触发它。beforeRouteEntereddata():{ return { content: "" } }, beforeRouteEntered(to, from, next){ // I get the data from api and I pass the html content but this.content = apiResult.data.content; // but this is not worked. }
0赞 yoduh 11/16/2023
编辑您的问题以包含新代码。很难在注释中读取未格式化的代码。
0赞 yoduh 11/16/2023
听起来这个问题已经得到了解答,因为您正在成功访问组件中的参数。现在你有一个新问题,所以应该是新问题,但它看起来很简单。 组件内部路由防护不正确。查看文档 - “beforeRouteEnter() ...无权访问组件实例”。只需将代码放在其他钩子中,例如 或this.contentthiscreated()mounted()

答: 暂无答案