vue-router配置安装

一、安装配置

1. 执行命令npm install vue-router安装
2. 在src下创建router目录，在router目录里面创建index.js
3. 在index.js中写入以下内容

   import { createRouter, createWebHistory } from 'vue-router'
   import HomeView from '../views/HomeView.vue'
   
   const routes = [
     {
       path: '/',
       name: 'home',
       component: HomeView
     },
     {
       path: '/about',
       name: 'about',
       component: function () {
         return import('../views/AboutView.vue')
       }
     }
   ]
   
   const router = createRouter({
     history: createWebHistory(process.env.BASE_URL),
     routes
   })
   
   export default router

4. 在main.js中导入并使用路由

   let app = createApp(App);
   app.use(router).mount('#app')

5. 在App.vue中写

   <template>
     <router-view/><!-- 这是路由出口 -->
   </template>