Vue.js 路由配置详解：从安装到使用

在Vue中，路由是通过Vue Router插件来实现的。在使用Vue Router时，需要先安装它：

npm install vue-router --save

安装完成后，在main.js中引入并使用它：

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

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: Home
    },
    {
      path: '/about',
      component: About
    }
  ]
})

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

以上代码中，我们使用Vue.use()方法来使用Vue Router。然后创建一个VueRouter实例，传入一个routes数组，数组中每个对象代表一个路由。每个路由对象都有一个path和一个component属性，分别表示路径和对应的组件。在创建Vue实例时，将router实例作为参数传入，并挂载到#app上。

在组件中使用路由时，可以使用Vue Router提供的router-link组件来实现。例如：

<template>
  <div>
    <router-link to='/'>Home</router-link>
    <router-link to='/about'>About</router-link>
    <router-view></router-view>
  </div>
</template>

以上代码中，我们使用router-link组件来生成链接，to属性表示链接的路径。同时，还需要使用router-view组件来显示对应的组件。