【vue-router】router-view

router-view作用

router-view 将显示与 url 对应的组件。你可以把它放在任何地方，以适应你的布局。

//router.ts
import type { RouteRecordRaw } from "vue-router";

const vueRoutes: RouteRecordRaw = {
  path: "/vue",
  name: "Vue",
  component: () => import("@/views/vue3/index.vue"),
  redirect: {
    name: "Template",
  },
  children: [
    {
      path: "template",
      name: "Template",
      component: () => import("@/views/vue3/page/1.模板语法.vue"),
    },
    {
      path: "list",
      name: "List",
      component: () => import("@/views/vue3/page/2.列表模拟.vue"),
    },
    {
      path: "watch",
      name: "Watch",
      component: () => import("@/views/vue3/page/3.监听器.vue"),
    },
  ],
};

export default vueRoutes;

<!--    index.vue-->
<template>
  <div class="page-container">
    <div class="page-left">
    </div>
    <div class="page-right">
      <router-view></router-view>
    </div>
  </div>
</template>

router-view的name

<router-view> 设置了 name，则会渲染对应的路由配置中 components 下的相应组件。

{
  path: "vue",
  name: "vue",
  components: {
    vue: () => import("@/views/vue3/index.vue"),
    mock: () => import("@/views/mockjs/index.vue"),
  },
},

  <router-view name="vue"></router-view>
  <router-view name="mock"></router-view>

router-view的v-slot

<router-view> 暴露了一个 v-slot API，主要使用 <transition> 和 <keep-alive> 组件来包裹你的路由组件。

• Component: VNodes, 传递给 <component>的is prop。
• route: 解析出的标准化路由地址。

<router-view name="mock" v-slot="{ Component, route }">
  <component :is="Component"></component>
  <div>{{ route }}</div>
</router-view>