Блог

Есть ли способ загружать более одного компонента одновременно при загрузке страницы с помощью vue router? Я просмотрел документацию, и там есть пример их сайта с рабочим примером с одной проблемой, вам действительно нужно нажать на ссылку «/», чтобы загрузить vue вот ссылка на этот пример Представления имен Vue-маршрутизаторов Я использую Laravel, а vue находится внутри Laravel, блейд-страница с <router-view> загрузит главную страницу

вот мой код маршрутизатора

 // Pages front
import Home from "../pages/front/Home.vue";
import Login from "../pages/front/Login.vue";
import Test from "../components/test.vue"
// Pages back
import Dashboard from "../pages/back/Dashboard.vue";


Vue.use(VueRouter);

const routes = [
    {
        path: "/",
        name: "home",
        components: {
            default: Home,
            helper: Test
        },
        children: [
            {
                path: "/login",
                name: "login",
                component: Login
            }
        ]
    }, {
        path: "/dashboard",
        name: "dashbaord",
        components: Dashboard
    }
];

const router = new VueRouter({mode: "history", base: process.env.BASE_URL, routes});

export default router;
  

и вот моя домашняя страница с 2 <router-view>

 <template>
  <div>
    <navigationTop />
    <h1 class="text-xl">Home Page</h1>
    <router-view />
    <router-view name="helper" />
  </div>
</template>
<script>
import navigationTop from "../../components/ExampleComponent";
export default {
  name: "",
  data() {
    return {};
  },
  components: {
    navigationTop,
  },
  computed: {},
  mounted: () => {},
  methods: {},
};
</script>
  

итак, я пытаюсь загрузить Test страницу, как только загружается моя домашняя страница, и использовать другую <router-view> для загрузки других страниц.

Проблема в том, что вы определили свой именованный вид на верхнем уровне (например, App.vue ), но пытаетесь использовать вспомогательный вид в вашем Home компоненте.

Учитывая макет, которого вы пытаетесь достичь, я не думаю, что вы на самом деле хотите использовать именованные представления. Чтобы сделать Test постоянное приспособление для домашнего маршрута, это, похоже, больше того, что вам нужно в Home.vue

 <template>
  <div>
    <NavigationTop />
    <h1 class="text-xl">Home Page</h1>
    <router-view />
    <Test /> <!-- 👈 directly inject Test here -->
  </div>
</template>
<script>
import NavigationTop from "@/components/ExampleComponent";
import Test from "@/components/test.vue";

export default {
  name: "",
  data() {
    return {};
  },
  components: {
    NavigationTop,
    Test
  },
  computed: {},
  mounted: () => {},
  methods: {},
};
</script>