项目vue 三栏布局 路由挂载router-view 怎么挂载，请举例

在 Vue Router 中，可以使用 `<router-view>` 组件来显示当前路由对应的组件。在三栏布局中，可以将三个组件分别对应到三个路由路径上，然后在布局组件中使用 `<router-view>` 组件来显示当前路径对应的组件。

以下是一个示例代码：

在路由实例中，将三个组件分别对应到三个路由路径上：

const routes = [
  { path: '/left', component: LeftColumn },
  { path: '/middle', component: MiddleColumn },
  { path: '/right', component: RightColumn }
]

在三栏布局组件中，使用 `<router-view>` 组件来显示当前路径对应的组件：

<template>
  <div class="container">
    <div class="left-column">
      <router-link to="/left">左栏</router-link>
    </div>
    <div class="middle-column">
      <router-link to="/middle">中栏</router-link>
      <router-view></router-view>
    </div>
    <div class="right-column">
      <router-link to="/right">右栏</router-link>
    </div>
  </div>
</template>

在上面的代码中，使用 `<router-link>` 组件创建了三个链接，分别对应三个路由路径。在中栏的 div 中使用了 `<router-view>` 组件来显示当前路径对应的组件。

当用户点击链接时，路由会根据路径跳转到对应的组件，并在 `<router-view>` 中显示该组件的内容。通过这种方式，可以实现在三栏布局中根据路由动态显示不同的组件内容。