YDOOK:vue3:vue-cli4: 嵌套路由官方实例用法详细教程

最新推荐文章于 2025-02-22 19:02:22 发布

原创最新推荐文章于 2025-02-22 19:02:22 发布 · 165 阅读

0 ·

CC 4.0 BY-SA版权

版权归作者 YDOOK JY Lin所有，未经同意，不可转载。同意转载后必须标明署名与出处。

文章标签：

#vue3 #嵌套路由命名 #router-view #YDOOK #JY Lin

Web 专栏收录该内容

118 篇文章

订阅专栏

本文详细介绍Vue3中使用Vue CLI4进行嵌套路由的配置与实践，包括HTML结构、VueJS路由定义及命名视图的使用，适用于前端开发者深入理解Vue3路由系统。

YDOOK:vue3:vue-cli4: 嵌套路由官方实例用法详细教程

© YDOOK JY Lin

1. HTML 部分：

<!-- UserSettings.vue -->
<div>
  <h1>Embedded Routers</h1>
  <router-view/>
  <router-view name="seconfRouterView"/>
</div>

2. vue JS 调用部分与定义：

{
  path: '/EmbeddedRouters',
  // 可以在顶级路由就配置命名视图，通过children命名子视图
  component: EmbeddedRouters,
  children: [{
    path: 'firstSonRouterViewPath',
    component: seconfRouterViewComponent
  }, 
  {
    path: 'secondSonRouterViewPath',
    components: {
      default: secondSonRouterComponentName,
      seconfRouterView: secondSonRouterComponentView
    }
  }]
}