使用 Props 定义应用程序的入口点

由于 router-view 是一个组件，因此它也可以接收 props。它接收的唯一属性是 name，它与初始化阶段在路由器对象中定义的相应路由记录中注册的名称相同。

任何其它附加属性在渲染期间都会直接传递给 router-view 的子组件。这是一个带有类属性的示例：

<router-view class="main-app-view"/>

如果 router-view 渲染为子组件，我们可以创建一个定义布局的关联模板。一个非常简单的模板示例如下：

<template>
    <div>Hello World</div>
</template>

子组件接收传入的属性类，渲染后实际输出变成如下：

<div class="main-app-view">Hello World</div>

当然，为了让我们的模板有用，它还应该包含 <router-view/> 元素，以便我们想要路由的内容有地方可以渲染。一种常见的设置是在模板和下面的路由器视图中包含一个导航菜单。这样，页面之间的内容会发生变化，但菜单保持不变。

导航到 App.vue 并确保您的模板具有以下代码：

<template>
    <div id="app">
        <div id="nav">
            <router-link to="/">Home</router-link> |
            <router-link to="/about">About</router-link>
        </div>
        <router-view/>
    </div>
</template>

让我们删除 <div id="app"> 中的所有代码，只留下一个 <router-view/> 组件：

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

我们现在将注释掉所有路由代码，如下所示：

const routes = [
// {
// path: '/',
// name: 'Home',
// component: Home
// },
// {
// path: '/about',
// name: 'About',
// // route level code-splitting
// // this generates a separate chunk (about.[hash].js) for this route
// // which is lazy-loaded when the route is visited.
// component: () => import(/* webpackChunkName: "about" */
'../views/About.vue')
// }
]

现在我们的应用程序输出将渲染为在 localhost:8080 上运行的空白页面，如图 6.4 所示：

Figure 1. Figure 6.4: Hello Vue Router application in the browser

输出是一个空页面，因为我们没有在文件中设置任何路由器配置，包括将路径映射到相关视图。如果没有这一步，路由系统将无法选择正确的视图并将其动态渲染到我们的 router-view 元素中。

在下一节中，我们将了解如何设置 Vue Router。