vue router-view 多个视图嵌套和命名router-view

最新推荐文章于 2025-07-10 20:32:17 发布

原创最新推荐文章于 2025-07-10 20:32:17 发布 · 2.4w 阅读

22 ·

CC 4.0 BY-SA版权

文章标签：

#router-view #vue

web 专栏收录该内容

82 篇文章

订阅专栏

本文详细解析了Vue中如何使用嵌套路由，通过在router-view中嵌套多个子router-view，实现页面组件的模块化加载。介绍了在router.js中配置子路由的方法，并展示了如何在父级组件中通过命名视图实现多个子组件的同时展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

多个router-view视图嵌套：

1，除了app.vue中的router-view之外，还有其他的嵌套在router-view中的router-view视图，子路由写在router.js children中

app.vue

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

Main.vue

<template>
<router-view/>
</template>

路由router.js

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'
import User from './views/User.vue'
Vue.use(Router)

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
      children:[{
        path:'article',
        // 单个router-view用：component
        component: About
      }
      }]
    }
  ]
})

命名router-view 注意components不是component

main.vue

<div>
  <h1>User Settings</h1>
  <NavBar/>
  <router-view/>
  <router-view name="helper"/>
</div>

router.js （默认的router-view是default，自己命名的就写自己定义的名称）

{
  path: '/settings',
  // 你也可以在顶级路由就配置命名视图
  component: UserSettings,
  children: [{
    path: 'emails',
    component: UserEmailsSubscriptions
  }, {
    path: 'profile',
    components: {
      default: UserProfile,
      helper: UserProfilePreview
    }
  }]
}