vue 路由使用实例代码

好的，下面是一个简单的 Vue 路由使用实例代码：

// main.js

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import Home from './components/Home.vue'
import About from './components/About.vue'

Vue.use(VueRouter)

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

const router = new VueRouter({
  routes
})

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

<!-- App.vue -->

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

在上面的代码中，我们首先在 `main.js` 中导入了 `VueRouter`，然后定义了两个路由组件 `Home` 和 `About`，并设置了它们的路由路径。

接着，我们创建了一个 `VueRouter` 实例，并将路由配置传递给它。然后，我们将这个路由实例传递给 `Vue` 实例，让它可以在组件中使用路由。

在 `App.vue` 组件中，我们使用 `router-link` 组件来生成链接，这些链接指向我们定义的路由路径。我们还使用了 `router-view` 组件来显示当前路由对应的组件。

这样，我们就完成了一个简单的 Vue 路由实例。当用户点击链接时，路由会自动切换到对应的组件。