vue3封装路由跳转方法

其实很简单

第一步：创建一个js/ts文件，将路由实例引入

//引入路由实例
import router from '@/router'  //注意 我这里使用@这是需要配置的 详情进主页哦

第二步：封装跳转和回退方法

// 跳转方法
export const navigateTo = (routerObj: object | string) => {
    router.push(routerObj);
}
// 回退方法
export const navigateBack = (num: number = -1) => {   //这里也可以传正数  正数就是向前跳转
    router.go(num);
}
// routerBack/回退方法
export const routerBack = () => {
    router.back();
}

第三步：使用

//xxxx.vue
//引入
import { navigateTo } from '@/hooks/router'
//使用
const goLogin= () => {
    navigateTo({
        name: 'login',
        params: {
            name: '张三',
            age: 18,
        }
    })
}

 完整代码：

//引入路由实例  也就是路由表
import router from '@/router'
// 跳转方法
export const navigateTo = (routerObj: object | string) => {
    router.push(routerObj);
}
// 回退方法
export const navigateBack = (num: number = -1) => {
    router.go(num);
}
// routerBack
export const routerBack = () => {
    router.back();
}