vue 2.7 配置路由

在 Vue 2.7 中配置路由需要进行以下步骤：

1. 安装 vue-router

在命令行中运行以下命令安装 vue-router：

npm install vue-router --save

2. 创建路由配置文件

在 src 目录下创建一个 router 目录，然后在其中创建一个 index.js 文件，用来配置路由。在 index.js 文件中，需要引入 Vue 和 Vue Router，并且创建一个路由实例。

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    // 在这里定义路由
  ]
})

export default router

3. 定义路由

在路由配置文件中，需要定义路由。路由是一个对象，其中包含 path 和 component 属性。path 表示路由的路径，component 表示该路径对应的组件。

import Home from '../views/Home.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]

export default routes

4. 将路由添加到 Vue 实例中

在 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 组件中，可以使用 $router 和 $route 访问路由信息。

参考文档：[Vue Router 官方文档](https://router.vuejs.org/zh/)