携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第8天，点击查看活动详情

名称：useHistory

业务需求：

封装vue-router的 useRouter，因为觉得useRouter使用起来真费劲，而且真的的理由来着

因为vue-router提供的useRouter只能在 script setup顶层使用，如果函数内使用返回结果为空。所以就需要引入Router对象

名字借荐react的路由名称，封装后，函数内也可以正常使用。

路由过程：router-link---->VueRouter---->router-view

代码示例：

import { useRouter } from 'vue-router'
const router = useRouter()

// 处理页面跳转
const AppRedirect = () => {
  const path = getCurrentRoute().path
  // 登录进入--默认跳转课程管理页面
  if (path == '/home') {
    const jumpPath = MenuLoader.getFirstEntry()
    router.push(jumpPath)
  }
}

Hooks代码设计实现：

import router from '@/router'

const useHistory = (options, params)=>{
    let path = ''
    let query = null
    if(typeof options == 'object' ){
        path = options.path ?? ''
        query = options.query || null
        router.push({
            path,
            query
        });
    }else if(typeof options == 'string'){
        path = options
        query = params || null
        router.push({
            path,
            query
        });
    }else{
        return router
    }
};

export default useHistory

还是一样，对参数进行类型判断，兼容字符串和对象访问方式

业务使用

/**
 * @description: 进入字典详情页面--子列表
 * @param {*} 
 * @return {*}
 */
const jumpDictDataHandel = (data) => {
  const dictType = data.dictType
  useHistory('/system/dictData', {
    dictType
  })
}

看一下，对比一下，是不是简洁了很多...

名称：useHistoryReplace

import router from '@/router'

const useHistoryReplace = (path,query)=>{
    router.replace({
        path,
        query
    });
};

export default useHistoryReplace

这个使用频率较低，与上面路由跳转一样，做路由地址的替换，封装了replace
如果有场景使用，就可以拿来直接用。

封装~~~完毕~~

针对业务侧一系列的Hooks封装，请看下方：

业务层-hooks封装设计
业务层-hooks封装之useAuth
业务层-hooks封装之useSessionStorage
业务层-hooks封装之usePreview
业务层-hooks封装之useExport
业务层-hooks封装之useBrowser