vue 的router-view 组件

最新推荐文章于 2025-11-05 10:03:14 发布

原创最新推荐文章于 2025-11-05 10:03:14 发布 · 636 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端

router-view 是 Vue Router 提供的核心组件，用于在页面中展示当前路由匹配到的组件内容。它相当于一个 "占位符"，会根据当前激活的路由自动渲染对应的组件。

基本用法

首先需要安装并配置 Vue Router
在模板中使用 <router-view> 标签作为路由组件的容器

<template>
  <div>
    <!-- 导航链接 -->
    <router-link to="/home">首页</router-link>
    <router-link to="/about">关于</router-link>
    
    <!-- 路由组件将在这里渲染 -->
    <router-view></router-view>
  </div>
</template>

主要特性

动态渲染：
根据当前 URL 对应的路由配置，自动渲染匹配到的组件

嵌套路由支持：
当使用嵌套路由时，父组件中的 <router-view> 会渲染子路由组件

// 路由配置示例
const routes = [
  {
    path: '/user',
    component: User,
    children: [
      { path: 'profile', component: UserProfile }, // 会渲染在User组件的router-view中
      { path: 'posts', component: UserPosts }      // 会渲染在User组件的router-view中
    ]
  }
]

命名视图：
可以通过 name 属性指定不同的视图，实现同时渲染多个组件

<!-- 模板中 -->
<router-view name="header"></router-view>
<router-view></router-view> <!-- 默认视图，name为default -->
<router-view name="footer"></router-view>

// 路由配置
{
  path: '/',
  components: {
    default: Main,
    header: Header,
    footer: Footer
  }
}

传递 props：
可以通过配置将路由参数作为 props 传递给渲染的组件

// 路由配置
{
  path: '/user/:id',
  component: User,
  props: true // 将路由参数作为props传递
}

常见用法场景

单页应用 (SPA) 的页面切换
实现复杂布局的嵌套页面结构
多区域同时更新不同组件内容

router-view 本身不会渲染任何内容，它的作用只是提供一个挂载点，具体渲染什么由 Vue Router 根据当前路由决定。这使得我们可以在不刷新整个页面的情况下，实现页面内容的动态切换，这也是单页应用的核心特性之一。