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

本文详细解析了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
    }
  }]
}

 

### Vue 中 `router-view` 组件的功能 `router-view` 是 Vue Router 提供的一个核心组件,用于渲染匹配当前路由的视图。当定义了多个路由路径时,`router-view` 将根据 URL 的变化动态加载相应的组件并展示出来。 #### 基本用法 最简单的形式是在单页应用(SPA)中使用单一的 `router-view` 来管理整个应用程序的主要内容区域: ```html <template> <div id="app"> <!-- 单一入口 --> <router-view></router-view> </div> </template> ``` 此设置下,所有的页面切换都将在同一个位置发生,即 `<router-view>` 所处的位置[^1]。 #### 路由嵌套与多级 `router-view` 为了支持更复杂的布局结构,如侧边栏菜单、顶部导航条等场景下的局部刷新需求,Vue 支持通过配置子路由来创建多层次的内容区。此时可以在父组件内再次声明 `<router-view>` 实现子组件间的平滑过渡而不影响全局状态: ```javascript const routes = [ { path: '/parent', component: ParentComponent, children: [ {path: 'child', component: ChildComponent} ] } ]; ``` 对应的模板可能是这样的: ```html <!-- ParentComponent.vue --> <template> <section class="container"> <header>Header Section</header> <!-- 子路由出口 --> <router-view></router-view> <footer>Footer Section</footer> </section> </template> ``` 这样就可以实现在同一页面的不同部分之间灵活地切换显示不同的组件,而不需要重新加载整个页面[^3]。 #### 页面间导航 对于希望触发页面级别的跳转操作(例如点击按钮或链接),可以利用编程方式调用 `$router.push()` 方法改变浏览器的历史记录栈中的URL,从而引起对应的新组件被挂载到指定的 `router-view` 上面去呈现给用户查看[^2]: ```js methods: { goToPage() { this.$router.push({ name: 'targetRouteName' }); } } ``` 以上就是关于如何在 Vue 应用程序里有效运用 `router-view` 进行页面管理交互的一些基本介绍技术要点。
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值