前提：我的vue3是结合ts的

1、安装

// 用这个命名安装router4版本，
// 不要用npm install vue-router，这个是安装router3版本的

npm install vue-router@4

2、在src文件下新建一个router文件夹，然后在这下面新建一个index.ts文件

// createWebHashHistory 是hash模式就是访问链接带有#
// createWebHistory  是history模式
import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'

// 引入文件，动态路由
const Home = () => import("../views/Home.vue");
const About = () => import("../views/About.vue");
const NotFound = () => import("../views/NotFound.vue");

// 这里要注意一点，如下面这种写的话会报错，ts
// {
//    path: "/",
//    name: "Home",
//    component: () => import("../views/Home.vue")
//  },


const routes = [
  {
    path: "/",
    name: "Home",
    component: Home,
  },
  {
    path: "/About",
    name: "About",
    component: About,
  },
  {
    path: "/:pathMatch(.*)*", // 代替vue2的通配符path: "*",
    name: "NotFound",
    component: NotFound,
  },
];

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

export default router

3、使用

3.1、先写跳转

<template>
	<div>
		<router-link to='/'> Home</router-link>
		<button @click="toAbout(1)">toAbout</button>
		<button @click="toAbout(2)">toAbout2</button>

	</div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { useRouter } from 'vue-router'

export default defineComponent({
	name: "Home",
	setup(props) {
        // useRouter相当于vue2的this.$router
        const router = useRouter();

        // ts语法，要先声明参数类型，不然会报错
        const toAbout = (ids:number) => {
            router.push({
                path:'/About',
                query:{
                    id:ids
                }
            })
        }

        return { toAbout } // 要记得return该方法出去 
    },
});
</script>

<style scoped>
</style>

3.2、接受参数

<template>
	<div>About- {{ id }}</div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from "vue";
import { useRoute, useRouter } from "vue-router";

export default defineComponent({
	name: "About",
	setup(props) {
        // useRoute 相当于vue2的this.$route。用于获取页面传递的参数
		const route = useRoute();
		let { id } = route.query;

		return { id };
	},
});
</script>

<style scoped>
</style>

到这里基本就成功了，不清楚的在下方留言，看到就及时回复你们

相关文章

vite.config.ts 基础配置，持续更新

vue3+vite+ts 安装遇到的一些问题和解决方案

vue3 keep-alive+vuex配合使用（简单易用）