项目vue 三栏布局 路由挂载

在 Vue 项目中，可以使用 Vue Router 进行路由管理。要挂载路由，需要进行以下步骤：

1. 安装 Vue Router

可以使用 npm 或者 yarn 进行安装，例如：

npm install vue-router

2. 创建路由实例

在项目的 src 目录下创建一个 router 目录，并在该目录下创建一个 index.js 文件，用于创建路由实例。示例代码如下：

import Vue from 'vue'
import VueRouter from 'vue-router'
import LeftColumn from '@/components/LeftColumn.vue'
import MiddleColumn from '@/components/MiddleColumn.vue'
import RightColumn from '@/components/RightColumn.vue'

Vue.use(VueRouter)

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

const router = new VueRouter({
  routes
})

export default router

在上面的代码中，首先引入了 Vue、Vue Router 和三个组件（LeftColumn、MiddleColumn 和 RightColumn）。然后使用 Vue.use(VueRouter) 安装 Vue Router 插件，创建了一个 routes 数组，其中每个元素表示一个路由，包括 path 和 component 两个属性，分别表示路由路径和对应的组件。最后创建了一个 router 实例，将 routes 作为参数传入。

3. 挂载路由实例

在项目的入口文件（例如 main.js）中，将创建好的路由实例挂载到 Vue 实例上。示例代码如下：

import Vue from 'vue'
import App from './App.vue'
import router from './router'

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

在上面的代码中，首先引入了 Vue、App 组件和 router 实例。然后创建了一个 Vue 实例，将 router 实例作为 router 属性传入，最后将 App 组件渲染到 #app 元素上。

4. 使用路由链接

在组件中使用路由链接进行页面跳转。示例代码如下：

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

在上面的代码中，使用 router-link 组件创建了三个链接，分别对应三个路由路径。当用户点击链接时，路由会根据路径跳转到对应的组件。

以上就是挂载路由的基本步骤，可以根据实际情况进行调整。