名称：useBrowser

业务需求：

这也是一个相对比较简单的，就是打开浏览器新tab页签。

想想挺简单的，不就是window.open就可以了吧，直接告诉你结果，不行。

为什么呢？

在单页工程中，地址访问都是通过路由拦截，如果是识别不到的地址，一般会catchAll进行拦截，redirect到新固定显示页面，如404、403等

Vue中需要使用

const routeUrl = router.resolve({
        path,
        query
});

返回一个可供window.open打开的地址，编解码处理后的完整地址

这就完了吗？我们来深挖一下，看看router.resolve的作用

resolve是router的一个方法，返回路由地址的标准化版本。

resolve接收两个参数：rawLocation、currentLocation（可选）。其中rawLocation是待转换的路由，rawLocation可以是个对象也可以是个字符串。currentLocation不传默认是currentRoute。

源码解析 blog.csdn.net/qq_33635385…

Hooks设计

import router from '@/router'

const useBrowser = (path,qu)=>{
    const query = {...{mode:'_blank'},...qu}

    const routeUrl = router.resolve({
        path,
        query
    });
    window.open(routeUrl.href, '_blank');
};

export default useBrowser

代码中，用到了import router from '@/router'，没有使用

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

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

传递默认参数

携带mode:'_blank'，这个是url地址上面默认拼写的

主要作用是：

首页模板进行参数截取，打开什么模板，我们也来看看，系统首页模板那块应用的逻辑

首页布局的三种模式：

ColumnLayout 列模式，首页为两栏模式，平台定位是管理端时间
FlowLayout 流式布局，正常页面布局，header、content、footer
FullLayout 全屏/填充布局，特殊业务场景，如大屏、在线课堂，不需要正常页面的header、content、footer

核心逻辑代码：

// 加载布局模式
const loaderLayout = () => {
  const query = getCurrentRoute().query
  // 管理员/非管理员页面布局不同
  if (isAdmin()) {
    layoutComp.value = ColumnLayout
  } else {
    if (query?.mode == '_blank') {
      layoutComp.value = FullLayout
    } else {
      layoutComp.value = FlowLayout
    }
  }
}

封装，完毕！~别害怕，已经测过的，正在服役...

业务层-hooks封装之useBrowser