Vue如何配置路由

1. 安装vue-router：通过npm或yarn安装vue-router。

   npm install vue-router

1. 创建路由配置文件：在项目的src目录下创建一个名为router.js（或其他名称）的文件，并在其中定义路由配置。

   import Vue from 'vue';
   import VueRouter from 'vue-router';
   
   // 导入组件
   import Home from './components/Home.vue';
   import About from './components/About.vue';
   
   // 使用VueRouter插件
   Vue.use(VueRouter);
   
   // 定义路由
   const routes = [
     { path: '/', component: Home },
     { path: '/about', component: About }
   ];
   
   // 创建路由实例
   const router = new VueRouter({
     routes
   });
   
   export default router;
   

1. 在根组件中使用路由：在主应用程序的入口文件（通常是main.js），导入并使用路由配置。

import Vue from 'vue';
import App from './App.vue';
import router from './router';

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

1. 创建组件：在指定路径上显示的每个页面都需要对应的组件。您可以创建一个或多个Vue组件来表示每个页面。

   <!-- Home.vue -->
   <template>
     <div>
       <h1>Home</h1>
       <!-- 页面内容 -->
     </div>
   </template>
   
   <script>
   export default {
     // 组件代码
   }
   </script>
   

   <!-- About.vue -->
   <template>
     <div>
       <h1>About</h1>
       <!-- 页面内容 -->
     </div>
   </template>
   
   <script>
   export default {
     // 组件代码
   }
   </script>
   

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