Блог

Главная - Вопросы по программированию - Vue 3 как создать несколько экземпляров в нескольких представлениях страниц

Vue 3 как создать несколько экземпляров в нескольких представлениях страниц

#vue.js #laravel-8 #vuejs3

Вопрос:

Я перехожу с JS на Vue 3. Я также использую Laravel 8. Каждый просмотр страницы содержит соответствующие JS, относящиеся только к странице. Поэтому мне нужна помощь в создании правильной структуры Vue3, чтобы я мог заменить этот JS кодом Vue 3. Каждый созданный компонент специфичен только для просмотра страницы. Итак,я узнал, что это способ создания одного компонента Vue3:

 import { createApp } from "vue"
import Front from "./components/PageOne"
createApp(PageOne).mount('#app1')

Затем я пытаюсь создать PageTwo с помощью:

 import Front from "./components/PageTwo"
createApp(PageTwo).mount('#app2')

и я представляю содержимое в файле макета:

 @extends('layouts.master')
   <div id="app1">
     @yield('contentChild')
    </div>

    <div id="app2">
        @yield('content')
    </div>

<script>
    src="{{mix('js/app.js')}}"
</script>

В результате я получаю содержимое первой страницы и содержимое второй страницы, отображаемые в одном и том же представлении страницы. ИТОГ: Мне нужна помощь в том, как доставить конкретный код Vue3 для определенных просмотров страниц.
Большое спасибо!

Ответ №1:

«Стандартный» способ решить эту проблему в Vue — использовать маршрутизатор Vue https://router.vuejs.org/

Таким образом, вы можете настроить конкретные маршруты и указать, какой компонент (страницу) следует доставлять в рамках данного макета.

Таким образом, ваш основной App.vue может выглядеть примерно так:

 <template>
  <div id="app" :class="'app-wrapper '   $route.name">
    <AppNav />
    <NotificationContainer />
    <router-view :key="$route.fullPath" />
  </div>
</template>

Где <router-view :key="$route.fullPath" /> служит компонент, представляющий данную страницу.

Метки: