Vite中如何使用vue-router4

前端小白，学习如何使用vue-router，这里记录和总结一下。

如何使用vite新建一个项目，这个根据官方的文档来就可以了。基本就是用如下的命令新建一个项目

npm create vite@latest my-vue-app -- --template vue

这样我们有了一个my-vue-app的项目了，目录结构就不说了，基本是根目录下有一个index.html，使用了src/main.js，我们就在main.js中添加一个router的js文件，然后就可以使用了。main.js使用了App.vue组件，我们就是在这个组件中写导航的内容

<script setup>
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
</script>

<template>
  <nav>
    <router-link to="/home">首页</router-link>
    <router-link to="/product">产品</router-link>
    <router-link to="/about">关于</router-link>
  </nav>
  <br />
  <br />
  <!-- 此处为组件显示容器 -->
  <router-view></router-view>
</template>

这里我们有了链接，但是还没有写router文件。在src目录下新建一个router目录，在router目录下，新建一个文件router.js，内容如下：

import {createRouter,createWebHashHistory} from 'vue-router';

const routes = [
	{path:'/home',component:()=>import("../components/Home.vue")},
	{path:'/about',component:()=>import("../components/about.vue")},
	{path:'/product',component:()=>import("../components/product.vue")},
];

const router = createRouter({
	history:createWebHashHistory('/'),
	routes
});

export default router;

这样我们就能看到App渲染出来的界面如下

这样我们点击首页、产品、关于都会跳转到相应的内容。而components目录下的三个文件Home.vue. About.vue. Product.vue文件的内容都比较简单，如下

<template>
	<div>this is home page</div>
</template>

 整体使用的还是比较简单，如果没有经验的话，可能不知道如何配置。