路由跳转

项目内可使用普通的 router.push 等常规方式进行路由跳转，亦可使用项目内提供的 useRouterPush 进行跳转（推荐），本篇主要介绍 useRouterPush 。

介绍

该hook对 router.push 进行二次封装，主要目的是代替 router.push 使用，通过该hook可更便捷得进行跳转， useRouterPush 返回一个对象，包含以下属性和方法：

• routerPush: Vue Router 的 push 方法。
• routerBack: Vue Router 的 back 方法。
• routerPushByKey: 根据路由key跳转的方法。
• toLogin: 跳转到登录页的方法。
• toggleLoginModule: 切换登录模块的方法。
• redirectFromLogin: 从登录页重定向的方法。

注意

在 setup 外使用时需要给 useRouterPush 传入 false。

详细说明

routerPush 和 routerBack 都是原有属性，就不再赘述了，这里主要介绍一下后面几个。

routerPushByKey

这里的 key 指的是路由的 name 属性，例如某个路由的配置为：

{
  "name": "soybean",
  "path": "/soybean-page",
  "component": "layout.base$view.soybean-page"
}

则跳转到该路由的代码为：

import { useRouterPush } from '@/hooks/common/router';

const { routerPushByKey } = useRouterPush();

routerPushByKey('soybean');

它支持传入可选参数 query 或是 params。

toLogin

字面意思，快速跳转到登录页，注意跳转前要清除登录信息，否则在路由守卫一样会被拦截回首页的。

toggleLoginModule

该方法传入参数类型为

/**
 * The login module
 *
 * - pwd-login: password login
 * - code-login: phone code login
 * - register: register
 * - reset-pwd: reset password
 * - bind-wechat: bind wechat
 */
type LoginModule = 'pwd-login' | 'code-login' | 'register' | 'reset-pwd' | 'bind-wechat';

作用是根据传入的 LoginModule 改变登录页挂载的登录功能模块，您可以自行删除或是扩展更多的模块，只需要确保类型是正确的就可以了。

redirectFromLogin

在登录成功选用，相比手动push到首页，它更见名知意。 它会根据登录页的 redirect 查询参数来决定重定向到哪个路由，如果没有 redirect 参数，则默认跳转到首页。

使用

<!-- 某个.vue文件 -->
<script lang="ts" setup>
import { useRouterPush } from '@/hooks/common/router';

const { routerPushByKey } = useRouterPush();
</script>

<template>
  <div>
    <NButton type="primary" @click="routerPushByKey('root')">返回首页</NButton>
  </div>
</template>

<!-- 某个.ts文件 -->
import { useRouterPush } from '@/hooks/common/router';

// 注意传入false
const { routerPushByKey } = useRouterPush(false);

function backToRoot() {
  routerPushByKey('root')
}