vue-routerrouter-view

Posted 2023-02-19 GHUIJS

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>