web-dev-qa-db-ja.com

Nuxtがモーダルへのリンクを開く

製品のリストがある 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'
        }
      })
    }
  }
}
javascriptvue.jsvue-routernuxt.js
5
Ayeye Brazo

私は最近、あなたがいるのとほぼ同じ状況に直面した後、この機能を実装しました。少なくとも私の場合、私は本当にそれを考えすぎていました。

私がしたことはすべて、単一のリソースページ（/ 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;
    }
}
};
0
retrograde

私があなたの要件を理解しているのは 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 structurepages/image/:id/:slugを維持する必要があります。これは、直接表示される場合に実際にページになる https://youpic.com/image/16660875/steffi-by-fs22photography 表示できるページ。

これがあなたを助けることを願っています!!

ご不明な点がございましたら、お気軽にお問い合わせください!!

0
Hardik Shah