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