Question

使用vue router加载页面时，是否可以同时加载多个组件？我查看了文档，并且有一个示例站点，其中有一个工作示例，其中有一个问题，您实际上需要单击“ /”链接来加载vue 这是该示例Vue-Router Names Views的链接我正在使用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>加载其他页面。

Answer 1

问题是您已在顶级（例如App.vue）上定义了命名视图，但是您试图在Home中使用 helper 视图组件。

鉴于您要实现的布局，我不认为您实际上要使用命名视图。为了使Test成为 home 路线的永久固定装置，这似乎更像您在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>

如何使用vue-router同时加载多个组件/ vue页面？

1 个答案: