router-view的用法

`router-view` 是 Vue.js 中用于渲染匹配到的组件的容器。它是 Vue Router 的一部分，一个专门用于实现单页面应用（SPA）的路由管理器。在使用 Vue Router 创建的单页面应用中，`router-view` 会根据当前的路由地址，动态地渲染对应的组件。

在使用 `router-view` 之前，需要先定义路由配置，然后在模板中放置 `router-view` 标签。当用户访问某个路由地址时，Vue Router 会根据定义的路由配置，决定应该加载和渲染哪个组件。

下面是一个简单的使用例子：

1. 首先，安装 Vue Router 并在 Vue 应用中引入：

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

Vue.use(VueRouter);

// 定义路由配置
const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
];

// 创建路由器实例
const router = new VueRouter({
  routes // (缩写) 相当于 routes: routes
});

new Vue({
  router,
  render: h => h(App)
}).$mount('#app');

2. 在 Vue 组件的模板中使用 `router-view`：

<template>
  <div id="app">
    <nav>
      <router-link to="/">首页</router-link>
      <router-link to="/about">关于我们</router-link>
    </nav>
    <router-view></router-view> <!-- 这里是路由视图 -->
  </div>
</template>

在这个例子中，当用户访问根路径 `/` 时，`router-view` 将渲染 `Home` 组件；访问 `/about` 路径时，将渲染 `About` 组件。

`router-view` 还可以嵌套使用，以实现更复杂的路由结构。在父视图中包含子视图的 `router-view`，就可以根据路由配置中的嵌套路由信息，渲染对应的子组件。