router-view v-slot 给出完整实例代码

当使用 `vue-router` 进行路由管理时，可以使用 `router-view` 组件来显示当前路由对应的组件。而 `v-slot` 则是 `Vue.js 2.6.0` 新增的语法糖，用于在子组件中定义插槽。下面是一个使用 `router-view` 和 `v-slot` 的完整实例代码：

<!-- App.vue -->
<template>
  <div>
    <header>
      <router-link to="/">Home</router-link>
      <router-link to="/about">About</router-link>
    </header>
    <router-view>
      <template v-slot:default>
        <p>Choose a page from the header above</p>
      </template>
    </router-view>
  </div>
</template>

<script>
export default {
  name: "App",
};
</script>

在上述代码中，我们在 `router-view` 组件中使用了 `v-slot`，并定义了一个名为 `default` 的插槽。如果当前路由没有匹配到任何组件，将会显示插槽中的内容。在这个例子中，如果用户打开网站时没有选择任何页面，将会显示一条消息：Choose a page from the header above。

注意：这里的 `App.vue` 是整个应用的根组件，在这个组件中定义了页面的基本结构，并通过 `router-view` 来渲染当前路由对应的组件。