＜router-view＞有什么用

在 Vue.js 应用里，<router-view> 是 Vue Router 库提供的一个重要组件，它在单页面应用（SPA）的路由系统中发挥着关键作用，下面为你详细介绍它的用途和工作机制。

用途概述

<router-view> 是一个占位符组件，它的主要功能是根据当前的路由路径动态渲染对应的组件。在单页面应用中，页面不会像传统多页面应用那样进行整体刷新，而是通过切换不同的组件来实现页面内容的更新，<router-view> 就是用来显示这些动态切换的组件的区域。

工作机制

当用户在应用中进行导航操作，使得当前的路由路径发生变化时，Vue Router 会根据预先定义的路由配置，找到与当前路径匹配的组件，并将这个组件渲染到 <router-view> 所在的位置。

示例代码

以下是一个简单的示例，展示了 <router-view> 的使用：

<template>
  <div id="app">
    <!-- 导航链接 -->
    <router-link to="/">首页</router-link>
    <router-link to="/about">关于</router-link>
    <!-- 路由视图占位符 -->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';

Vue.use(VueRouter);

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
];

const router = new VueRouter({
  mode: 'history',
  routes
});

export default router;

代码解释

1.App.vue 文件：

• <router-link> 组件用于创建导航链接，用户点击这些链接时会触发路由切换。
• <router-view> 组件作为占位符，根据当前路由路径渲染对应的组件。

2.router/index.js 文件：

• 定义了路由配置，包括路径和对应的组件。
• 当用户访问 / 路径时，会渲染 Home 组件；访问 /about 路径时，会渲染 About 组件。

总结

<router-view> 是 Vue Router 中实现路由切换和组件动态渲染的核心组件，它使得单页面应用能够在不刷新整个页面的情况下，动态显示不同的内容，提升了用户体验。