製品のリストがある Nuxt アプリケーションを作成していて、それらの1つをクリックすると、製品の専用ページが開きます。正常に動作しています。
構造は:
/pages/featured // directory of products
/pages/product/:id/:slug // Dedicated product page
今私は新しい機能を追加したいと思います:
私が達成したいことの良い例は、 Youpic の写真ディレクトリです。
内部ナビゲーション付きのダイアログに完全に表示される「製品」のリスト。
さまざまな nuxt-routing および vue-router のドキュメントを調べて開発を試みていますが、まだソリューションから遠く離れています。
ここに表示されるコードのこの小さな部分は、必要なものとかなり似ていますが、それを正しく実装する方法と、nuxtカスタムルーティングを作成する方法がわかりません。
export default {
router: {
extendRoutes (routes, resolve) {
routes.Push({
path: '/users/:id',
components: {
default: resolve(__dirname, 'pages/users'), // or routes[index].component
modal: resolve(__dirname, 'components/modal.vue')
},
chunkNames: {
modal: 'components/modal'
}
})
}
}
}
私は最近、あなたがいるのとほぼ同じ状況に直面した後、この機能を実装しました。少なくとも私の場合、私は本当にそれを考えすぎていました。
私がしたことはすべて、単一のリソースページ(/ pages/product /:id /:slug)を取得し、デフォルトでモーダルにすることだけでした。私はvuetifyを使用していますが、v-dialogはモーダルです。 nuxtプロジェクト階層は変更されませんでした。同等のものはslug.vueページです。
<template>
<v-dialog v-model="drawer" fullscreen hide-overlay transition="dialog-bottom-transition">
<v-card height="100vh">
<div class="flex">
<v-toolbar dark color="primary darken-2">
<v-btn icon dark @click="close">
<v-icon>close</v-icon>
</v-btn>
<v-toolbar-title>{{member.alias}}</v-toolbar-title>
<v-spacer></v-spacer>
<v-toolbar-items>
<v-btn text nuxt :to="`/members/${member.id}/notes`">Notes</v-btn>
<v-btn text nuxt :to="`/members/${member.id}/edit`">Edit</v-btn>
<v-btn text nuxt :to="`/members/${member.id}/payments`">Payments</v-btn>
</v-toolbar-items>
</v-toolbar>
<v-row no-gutters>
</v-row>
</div>
</v-card>
</v-dialog>
</template>
<script>
import { mapGetters } from "vuex";
export default {
watchQuery: ["id"],
transition(to, from) {
if (!from) {
return "slide-left";
}
return +to.query.id < +from.query.id ? "slide-right" : "slide-left";
},
data() {
return {
id: this.$route.params.id,
drawer: true
};
},
fetch({ store, params }) {
store.commit("members/active", params.id);
},
computed: {
member: {
get() {
return this.$store.getters["members/active"];
},
set(member) {
this.$store.commit("members/update", {
id: member.id,
member: member
});
}
}
},
methods: {
async close() {
await this.$nuxt.$router.go(-1);
this.drawer = false;
}
}
};
私があなたの要件を理解しているのは https://youpic.com/explore を見ていることであり、https://www.example.com/featured (directory of products)
ルートが必要であり、製品をクリックするとダイアログが開きます。ルートがhttps://www.example.com/product/:id/:slug (Details page)
の全画面表示になります。
間違えたら訂正してください!!
今、あなたは2つの方法でこれを達成することができます
1)各製品(https://www.example.com/featured (directory of products)
ルート)をクリックして、https://www.example.com/product/:id/:slug (Details page)
ルートへのリダイレクトでnuxt-link
を使用します
2)各製品(つまり、https://www.example.com/featured (directory of products)
ルート)をクリックして、ルートをrouter.Push
で手動で更新し、ダイアログを開きます。
https://youpic.com/explore と表示され、これをNuxt
コード構造がpages/explore
であるとすると、ルートはrouter.Push
to https://youpic.com/image/16660875/steffi-by-fs22photography ただし、これを共有/取得して、URL(https://youpic.com/image/16660875/steffi-by-fs22photography)
を開いてNuxt code structure
pages/image/:id/:slug
を維持する必要があります。これは、直接表示される場合に実際にページになる https://youpic.com/image/16660875/steffi-by-fs22photography 表示できるページ。
これがあなたを助けることを願っています!!
ご不明な点がございましたら、お気軽にお問い合わせください!!