如何使用配置好的vue router

使用配置好的vue-router的步骤如下：

1. 在Vue项目的入口文件（通常是main.js）中引入路由配置文件和Vue实例：

   import Vue from 'vue';
   import App from './App.vue';
   import router from './router'; // 引入路由配置文件

   new Vue({
     router, // 将路由配置注入到Vue实例中
     render: h => h(App)
   }).$mount('#app');

2. 在Vue组件中使用路由：
在需要导航的组件中，可以使用`<router-link>`组件来创建链接，使用`<router-view>`组件来渲染路由对应的组件。

   <template>
     <div>
       <router-link to="/">Home</router-link> <!-- 创建首页链接 -->
       <router-link to="/about">About</router-link> <!-- 创建关于页面链接 -->

       <router-view></router-view> <!-- 渲染对应的组件 -->
     </div>
   </template>

   <script>
   export default {
     // 组件逻辑
   }
   </script>

3. 配置路由导航：
在路由配置文件中，可以设置路由的路径和对应的组件。你可以根据需要定义更多的路由。

   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;

这样，你就可以使用配置好的vue-router进行页面导航了。当用户点击链接时，路由会根据路径匹配到对应的组件，并渲染到`<router-view>`中。