vue3 + TS 中关于 函数式导航 的封装

在 vue3 中，我们会因为多个视图需要进行跳转操作进行多次编写同一个函数，所以我们需要对函数式导航进行封装。

1. 我们首先需要对 router 进行封装。示例代码如下：

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

const routes:Array<RouteRecordRaw> = [
    {
        path: "/",
        redirect: "/login",
    },
    {
        path: "/login",
        name: "login",
        component: () => import('../views/Login.vue'),
    },
    {
        path: "/main",
        name: "main",
        component: () => import('../views/Main.vue'),
    },
]

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

2. 我们需要在封装的文件中输入如下代码即可。

//这里不建议使用 import {useRouter} from "vue-route"，因为useRouter只能在setup中使用，这里会导致后续操作变成 undefined。
import router from "../router";  
import type { LocationQueryRaw } from 'vue-router'
/**
 * 用于处理跳转
 * @param path LocationQueryRaw
 * 
 */
function Jump(path:LocationQueryRaw){
    console.log(router);
    
    router.push(path);
}

export default Jump;

注意：在 vue3 中，useRouter 在 setup 外使用会出现 undefined，并且目前在网上并没用一个比较好的解决方法，我们这里则直接使用 vueRouter 官网 给的推荐示例。

官方文档说明：编程式导航 | Vue Router (vuejs.org)