使用vite配置路由

一、创建vite项目

二、安装路由，指令npm install vue-router@4

三、全局引用路由

main.js文件源码：

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
//全局引用路由
import router from './router'
createApp(App).use(router).mount('#app')

四、路由配置

在src下新建router文件夹和views文件夹。在router文件夹下新建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>

HelloWorld.vue源码：

<template>
  <div>
    HelloWorld
  </div>
</template>

<script>
export default {
  setup () {
    

    return {}
  }
}
</script>

<style lang="scss" scoped>

</style>

运行结果：