Nuxt открыть ссылку на модал

Question

Я создаю приложение Nuxt , в котором есть список продуктов, и, щелкнув по одному из них, открывается специальная страница продукта. Он работает нормально.

Структура:

/pages/featured // directory of products
/pages/product/:id/:slug // Dedicated product page

Теперь я буду sh, чтобы добавить новую функцию:

• Я буду sh в сохранить выделенную страницу продукта, если щелкнуть на странице, которая не является каталогом продуктов, или если люди попадут прямо на нее;
• I wi sh, чтобы открыть почти полноэкранный диалог продукта в верхней части каталога, если, очевидно, щелкнуть по каталогу;
• Сохранить изменения маршрутизации в диалоговых окнах.

Хорошим примером того, чего я хочу достичь, является sh каталог фотографий Youpi c.

Список "продуктов", видимый полностью в диалоге с его внутренней навигацией.

Я смотрю на различные nuxt-routing и vue -router документации, чтобы попытаться разработать его, но я все еще далек от решения.

Эта небольшая часть кода I смотрите здесь выглядит довольно похоже на то, что мне нужно, но я не понимаю, как я должен правильно реализовать это и как чтобы создать мою собственную пользовательскую маршрутизацию:

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'
        }
      })
    }
  }
}

Answer 1

Я создал решение для песочницы для вас здесь: https://codesandbox.io/s/reverent-leftpad-xj81p

Объяснение решения:

В решении используется функция beforeRouteLeave() из vue-router которая доступна для ваших текстовых страниц по умолчанию:

beforeRouteLeave(to, from, next) {
  if (to.name === "product-id") {
    this.displayProductModal(to);
  } else {
    next();
  }
},

Эта функция прерывает любые изменения маршрута на избранной странице, прежде чем они произойдут, и если целевой маршрут является маршрутом детализации продукта (что означает, что кто-то щелкнул) в ссылке на продукт), вместо этого открывается модальное диалоговое окно.

Для обработки изменения URL при открытии и закрытии модального объекта используется объект window.history:

displayProductModal(route) {
  this.activeModal = route.params.id
  window.history.pushState({}, null, route.path)
},
hideProductModal() {
  this.activeModal = null
  window.history.pushState({}, null, this.$route.path)
}

Попробуйте немного поиграйте, это должно работать точно так же, как пример youpi c, который вы предоставили.

Примечание. В примере не используются реальные "модалы", весь пример настолько прост, насколько это возможно для простоты.

Answer 2

Насколько я понимаю, ваше требование выглядит так: 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) маршрут) используйте nuxt-link с перенаправлением на https://www.example.com/product/:id/:slug (Details page) маршрут

2) При нажатии каждого продукта (например, https://www.example.com/featured (directory of products) маршрут) вручную обновите маршрут с помощью router.push и откройте диалоговое окно

сейчас , если мы увидим https://youpic.com/explore и примем это как Nuxt структура кода будет pages/explore, где они вручную обновят маршрут с router.push до https://youpic.com/image/16660875/steffi-by-fs22photography, но когда вы поделитесь / возьмите URL(https://youpic.com/image/16660875/steffi-by-fs22photography) и попробуйте открыть его, поэтому в Nuxt code structure вы должны сохранить pages/image/:id/:slug, что на самом деле будет страницей, если вы непосредственно увидите go до https://youpic.com/image/16660875/steffi-by-fs22photography страницу, которую вы можете увидеть .

Надеюсь, это поможет вам !!

Если у вас есть какие-либо сомнения, мы можем обсудить больше !!

Answer 3

Я недавно реализовал эту функцию после того, как столкнулся почти с той же ситуацией, в которой вы находитесь. По крайней мере, в моем случае я действительно задумался над ней.

Все, что я сделал, это взял одну страницу ресурса (/ pages / product /: id /: slug в вашем случае) и сделал ее модальной по умолчанию. Я использую vuetify и V-диалог является модальным. Иерархия пустых проектов не изменилась. Вашим эквивалентом будет страница слизня. 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;
    }
}
};