图解配置vite路由

一、安装路由插件

二、进行路由配置

在src下新建ruter文件夹和views文件夹。在ruter文件夹下新建index.js文件，在views文件夹下新建InDex.vue文件

注意：router 文件夹、index.js文件、views 文件夹、InDex.vue文件最好不要改名字，因为全局配置中会用到。

三、在index.js文件输入以下代码 

// 引入需要的模块
import { createRouter,  createWebHistory } from 'vue-router'
import InDex from '../views/InDex.vue'
// 下面使用了es6的对象增强写法，命名必须是routes
const routes = [
    {
        //默认展示，这是主页面路由必须加斜杠 /
        path: '/',
        component: InDex,
    },
    {
        path: '/hello',
        component: () => import('../components/HelloWorld.vue')
    }, 
]

// 创建路由
const router = createRouter({
    history: createWebHistory(),
    routes
})

// 导出路由
export default router

四、在InDex.vue文件输入以下代码 

<template>
    <div>
        <router-link to="/hello">点击跳转路由</router-link>
    </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped></style>

五、在App.vue文件输入以下代码

<template>
  <!-- router-view :   路由的整个出口, 用来显示和 URL 对应的组件; -->
  <router-view v-slot="{ Component }">
      <!-- keep-alive 是Vue提供的一个抽象组件，主要用于保留组件状态或避免重新渲染。 -->
      <keep-alive>
          <component :is="Component" />
      </keep-alive>
  </router-view>
</template>

<script>
  export default {
    
  }
</script>

<style lang="scss" scoped>

</style>

六、在main.js文件中使用 

运行结果