vuecli3路由配置

Vue CLI 3是一种用于构建Vue应用程序的脚手架工具，它允许我们快速配置和使用路由。在Vue CLI 3中，我们使用Vue Router来处理和管理路由。

要配置路由，我们首先需要在项目中安装Vue Router。我们可以通过运行以下命令来安装它：

npm install vue-router

安装完成后，我们需要在项目的`src`目录下创建一个`router`文件夹，并在其中创建一个名为`index.js`的文件。在该文件中，我们需要导入Vue和Vue Router，并使用`Vue.use()`来安装Vue Router插件。

然后，我们可以定义路由，并创建一个新的Vue Router实例。我们可以通过使用`new VueRouter()`来创建它，同时传入一个配置对象，其中包含我们想要的路由规则。

在配置对象中，我们可以使用`routes`选项来定义我们的路由规则。路由规则是一个数组，包含不同的路由对象。每个路由对象都包含`path`和`component`属性。`path`属性指定了路由的路径，而`component`属性指定了与该路由对应的组件。

例如，我们可以定义一个简单的路由规则，如下所示：

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

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    component: Home
  },
  {
    path: '/about',
    component: About
  }
]

const router = new VueRouter({
  routes
})

export default router

在配置完成后，我们还需要在根组件中使用`router-view`组件来显示路由对应的组件。我们还可以使用`router-link`组件来创建导航链接，以便在不同的路由之间跳转。

总之，Vue CLI 3使得配置和使用路由变得非常简单。我们只需创建一个路由配置文件，定义路由规则，并在根组件中使用相应的组件来展示路由内容。使用Vue Router插件，我们可以轻松地管理和处理应用程序的路由。