Question

首先，我是vue.js的新手，所以如果我的问题有点基本，我深表歉意。我的App.vue是：

<template>
  <div id="app">
    <router-view />
  </div>
</template>

我有一个router.js，其中有：

import Vue from 'vue';
import Router from 'vue-router';

import Container from "./components/Container.vue";
import Home from "./components/Home.vue";
import Login from "./components/Login.vue";

Vue.use(Router);

export default new Router({
    mode: 'history',
    base: process.env.BASE_URL,
    routes: [{
            path: '/',
            name: 'login',
            component: Login,
        },
        {
            path: '/home',
            name: 'home',
            component: Container,

        },
    ],
});

想法是Container具有导航功能，应用于各种组件（包括Home）。我该怎么办？

Answer 1

就像拥有包含App.vue的{{1}}一样，您需要一个router-view组件来包含另一个Container组件。这将创建一个嵌套的路由器视图。

一旦这样做，您将需要添加子路线：

router-view

关键是添加子路径，并将其中一个子路径留空。

如何创建与vue路由器一起使用的子组件？

1 个答案: