@deppon/deppon-router
Advanced tools
@deppon/deppon-routerVue Router 4 封装包
npm install @deppon/deppon-router
依赖说明：
vue-router 已声明为 peerDependencies，如果宿主项目已安装 vue-router@^4.0.0，将优先使用宿主项目的版本，避免版本冲突vue-router，会自动安装（因为也在 dependencies 中）vue-router@^4.0.0 以确保版本一致性@deppon/deppon-router 中，不再需要 @deppon/deppon-utils 依赖import { createDepponRouter } from '@deppon/deppon-router';
// 创建路由实例
const router = createDepponRouter({
routes: [
{
path: '/',
name: 'Home',
component: () => import('./views/Home.vue'),
meta: {
title: '首页',
},
},
{
path: '/about',
name: 'About',
component: () => import('./views/About.vue'),
meta: {
title: '关于',
},
},
],
routerOptions: {
history: 'web', // 'web' | 'hash' | 'memory'，默认为 'web'
base: '/',
},
});
export default router;
在 Vue 应用中安装插件：
import { createApp } from 'vue';
import { VuePlugin } from '@deppon/deppon-router';
import App from './App.vue';
const app = createApp(App);
// 安装插件
app.use(VuePlugin, {
routes: [
{
path: '/',
name: 'Home',
component: () => import('./views/Home.vue'),
meta: {
title: '首页',
},
},
],
routerOptions: {
history: 'web', // 'web' | 'hash' | 'memory'
},
});
app.mount('#app');
import { createApp } from 'vue';
import { VuePlugin } from '@deppon/deppon-router';
import App from './App.vue';
const app = createApp(App);
app.use(VuePlugin, {
routes: [
// ... 路由配置
],
guards: {
// 全局前置守卫
beforeEach(to, from, next) {
// 权限检查
if (to.meta.requiresAuth && !isAuthenticated()) {
next('/login');
} else {
next();
}
},
// 全局后置守卫
afterEach(to, from) {
// 路由变化后的处理
console.log('路由变化:', to.path);
},
// 全局解析守卫
beforeResolve(to, from, next) {
// 解析前的处理
next();
},
},
});
app.mount('#app');
import { createApp } from 'vue';
import { VuePlugin } from '@deppon/deppon-router';
import { VuePlugin as LogPlugin } from '@deppon/deppon-log';
import App from './App.vue';
const app = createApp(App);
// 先创建路由实例
const router = createDepponRouter({
routes: [
// ... 路由配置
],
});
// 安装路由插件（传入 log 实例以启用自动路由追踪）
app.use(VuePlugin, {
router,
log: logInstance, // deppon-log 实例
});
// 或者使用插件方式
app.use(VuePlugin, {
routes: [
// ... 路由配置
],
log: logInstance,
});
app.mount('#app');
<script setup>
import { useRouter, useRoute } from '@deppon/deppon-router';
import { ref } from 'vue';
const router = useRouter();
const route = useRoute();
// 获取当前路由信息
console.log(route.path);
console.log(route.params);
console.log(route.query);
// 路由跳转
const goToHome = () => {
router.push('/home');
};
// 使用工具方法
const goToAbout = () => {
router.pushByName('About', {}, {});
};
const goBack = () => {
router.goBack();
};
// 使用智能获取路由参数（自动适配 iframe 环境）
const route = useRoute();
const sourceType = route.value.getQueryByRoute('sourceType');
const allParams = route.value.getQueryByRoute();
// 使用智能路由跳转（在 iframe 环境中自动使用 viewTab）
const goToDetail = () => {
router.smartPush({
path: '/preferInfo',
query: { sourceType: 'insert' },
params: { custNumber: '701265308' },
_viewTab: {
title: 'CMC-产品折扣新增',
uumsFunction: {
functionCode: 'CMC_FUNCTION_00002',
sourceSystem: 'CMC',
},
closeCurrentTab: true,
},
});
};
</script>
<template>
<div>
<button @click="goToHome">去首页</button>
<button @click="goToAbout">去关于页</button>
<button @click="goBack">返回</button>
</div>
</template>
<script>
export default {
methods: {
goToHome() {
// 使用 this.$router 访问
this.$router.push('/home');
},
goToAbout() {
// 使用工具方法
this.$router.pushByName('About');
},
goBack() {
this.$router.goBack();
},
getParams() {
// 使用智能获取路由参数（自动适配 iframe 环境）
const allParams = this.$router.getQueryByRoute();
const sourceType = this.$router.getQueryByRoute('sourceType');
console.log('所有参数:', allParams);
console.log('sourceType:', sourceType);
},
goToDetail() {
// 使用智能路由跳转（在 iframe 环境中自动使用 viewTab）
this.$router.smartPush({
path: '/preferInfo',
query: { sourceType: 'insert' },
_viewTab: {
title: 'CMC-产品折扣新增',
closeCurrentTab: true,
},
});
},
},
mounted() {
// 访问当前路由
console.log(this.$route.path);
},
};
</script>
创建增强的 Vue Router 实例。
options.routes - 路由配置数组（必填）options.routerOptions - Vue Router 原始配置选项（可选）
history - 历史模式（'web' | 'hash' | 'memory'），默认为 'web'base - 应用的基础路径scrollBehavior - 滚动行为函数options.guards - 路由守卫配置（可选）
beforeEach - 全局前置守卫afterEach - 全局后置守卫beforeResolve - 全局解析守卫options.log - 日志实例（可选，用于路由追踪）options.onRouteChange - 路由变化回调（可选）增强的 Vue Router 实例，包含以下额外方法：
safePush(location, onComplete, onAbort) - 安全的路由跳转safeReplace(location, onComplete, onAbort) - 安全的路由替换pushByName(name, params, query) - 根据路由名称跳转pushByPath(path, query) - 根据路由路径跳转goBack(delta) - 返回上一页hasRoute(name) - 检查路由是否存在（包括动态添加的路由）getRouteConfig(name) - 获取路由配置（包括动态添加的路由）smartPush(location, onComplete, onAbort) - 智能路由跳转（在 iframe 环境中自动使用 viewTab，否则使用 router.push）getQueryByRoute(key) - 智能获取路由参数（在 iframe 环境中优先从父级获取，否则从当前路由 query 获取）获取 router 实例。
import { useRouter } from '@deppon/deppon-router';
const router = useRouter();
router.push('/home');
获取当前路由对象。
import { useRoute } from '@deppon/deppon-router';
const route = useRoute();
console.log(route.value.path);
const routes = [
{
path: '/',
name: 'Home',
component: () => import('./views/Home.vue'),
meta: {
title: '首页',
requiresAuth: false,
},
},
{
path: '/user',
name: 'User',
component: () => import('./views/User.vue'),
meta: {
title: '用户中心',
requiresAuth: true,
},
children: [
{
path: 'profile',
name: 'UserProfile',
component: () => import('./views/UserProfile.vue'),
meta: {
title: '个人资料',
},
},
],
},
];
app.use(VuePlugin, {
routes: [
// ... 路由配置
],
guards: {
beforeEach(to, from, next) {
// 检查是否需要登录
if (to.meta.requiresAuth && !isAuthenticated()) {
next({
path: '/login',
query: { redirect: to.fullPath },
});
} else {
next();
}
},
},
});
路由配置中的 meta.title 会自动设置为页面标题：
{
path: '/about',
name: 'About',
component: () => import('./views/About.vue'),
meta: {
title: '关于我们', // 会自动设置为 document.title
},
}
当传入 log 实例时，会自动追踪路由变化：
import { VuePlugin as LogPlugin } from '@deppon/deppon-log';
import { VuePlugin as RouterPlugin } from '@deppon/deppon-router';
// 初始化日志
const logInstance = LogPlugin.init(/* ... */);
// 安装路由插件，传入 log 实例
app.use(RouterPlugin, {
routes: [
// ... 路由配置
],
log: logInstance, // 自动追踪路由变化
});
路由变化时会自动触发以下埋点事件：
$route_before - 路由跳转前$pageview - 页面浏览getQueryByRoute 是一个智能获取路由参数的方法，它会自动检测当前环境并获取相应的参数：
getParentParams），同时合并当前路由的 query 参数import { useRouter, useRoute } from '@deppon/deppon-router';
// 方式1：通过 router 实例使用
const router = useRouter();
const allParams = router.getQueryByRoute(); // 获取所有参数
const sourceType = router.getQueryByRoute('sourceType'); // 获取指定参数
// 方式2：通过 route 对象使用（推荐）
const route = useRoute();
const allParams = route.value.getQueryByRoute(); // 获取所有参数
const sourceType = route.value.getQueryByRoute('sourceType'); // 获取指定参数
// 方式3：在 Options API 中使用
this.$router.getQueryByRoute('sourceType');
key (string, 可选): 参数键名
key，返回对应的参数值（不存在返回 null）key，返回所有参数对象iframe 环境：
top.Ext.getCmp('mainAreaPanel').params）非 iframe 环境：
router.currentRoute.value.query）// 在 Composition API 中使用
import { useRoute } from '@deppon/deppon-router';
export default {
setup() {
const route = useRoute();
// 获取所有参数
const params = route.value.getQueryByRoute();
console.log('所有参数:', params);
// 获取指定参数
const sourceType = route.value.getQueryByRoute('sourceType');
const custNumber = route.value.getQueryByRoute('custNumber');
return {
sourceType,
custNumber,
};
},
};
// 在 Options API 中使用
export default {
mounted() {
// 获取所有参数
const params = this.$router.getQueryByRoute();
console.log('所有参数:', params);
// 获取指定参数
const sourceType = this.$router.getQueryByRoute('sourceType');
},
};
原代码（需要手动判断环境）：
export function getQueryByRoute(key) {
let params;
if (top && top.viewTab) {
params =
(top.Ext && top.Ext.getCmp && top.Ext.getCmp('mainAreaPanel') && top.Ext.getCmp('mainAreaPanel').params) ||
{};
} else {
params = router.currentRoute.query;
}
return !key ? params : params ? params[key] : null;
}
新代码（自动适配）：
import { useRoute } from '@deppon/deppon-router';
const route = useRoute();
const sourceType = route.value.getQueryByRoute('sourceType');
getQueryByRoute 在 iframe 环境中会自动从父级获取参数，无需额外依赖null（当提供 key 时）或空对象 {}（当不提供 key 时）smartPush 是一个智能路由跳转方法，它会自动检测当前环境：
viewTab，则自动使用 viewTab 进行跳转router.push 进行跳转smartPush 的参数传递方式与 router.push 完全一致：
// 字符串路径
router.smartPush('/home');
// 对象格式（与 router.push 一致）
router.smartPush({ path: '/home', query: { id: 1 } });
router.smartPush({ name: 'Home', params: { id: 1 } });
在 iframe 环境中，可以通过 _viewTab 选项自定义 viewTab 行为：
router.smartPush({
path: '/preferInfo',
query: { sourceType: 'insert' },
params: { custNumber: '701265308', preferId: '1312' },
_viewTab: {
title: 'CMC-产品折扣新增', // 标签页标题
uumsFunction: {
functionCode: 'CMC_FUNCTION_00002',
sourceSystem: 'CMC',
},
closeCurrentTab: true, // 是否关闭当前标签页
},
});
title (string, 可选): 标签页标题，默认使用路由 meta.title 或 '新页面'uumsFunction (object, 可选): UUMS 功能配置
functionCode (string): 功能代码sourceSystem (string): 来源系统closeCurrentTab (boolean, 可选): 是否关闭当前标签页，默认为 false原代码（需要手动判断环境）：
if (top.viewTab) {
let params = { sourceType: 'insert' };
let url = location.origin + '/#/preferInfo?sourceType=insert';
let tabUrl = top.Ext.urlAppend(url, 'isUap=true');
top.closeTab(tabUrl, 'IFRAME');
top.viewTab('CMC-产品折扣新增', url, 'iframe', params, {
uumsFunction: {
functionCode: 'CMC_FUNCTION_00002',
sourceSystem: 'CMC',
},
});
} else {
this.$router.push({
path: '/preferInfo',
query: { sourceType: 'insert' },
});
}
新代码（自动适配）：
router.smartPush({
path: '/preferInfo',
query: { sourceType: 'insert' },
params: { sourceType: 'insert' },
_viewTab: {
title: 'CMC-产品折扣新增',
uumsFunction: {
functionCode: 'CMC_FUNCTION_00002',
sourceSystem: 'CMC',
},
closeCurrentTab: true,
},
});
smartPush 内置了 viewTab 功能，无需额外依赖router.push_viewTab 选项仅在 iframe 环境中生效，非 iframe 环境会被忽略params 参数会传递给 viewTab 的 params 参数，query 会转换为 URL 的 query stringvue-router@^4.0.0beforeEach 如果返回 false，会阻止导航beforeEach 如果返回 Promise，会等待 Promise 完成后再导航safePush 和 safeReplace 可以避免导航重复的错误meta.title 会自动设置为页面标题smartPush 和 getQueryByRoute 已内置 viewTab 相关功能，无需额外依赖getQueryByRoute 在 iframe 环境中会自动合并父级 params 和路由 query 参数，query 参数优先级更高hasRoute 和 getRouteConfig 支持检测通过 router.addRoute() 动态添加的路由，可以在登录后（如 onLoggedIn 回调中）动态添加路由后正常使用更多使用示例请参考项目文档或源码。
FAQs
Vue Router 4 wrapper package
The npm package @deppon/deppon-router receives a total of 81 weekly downloads. As such, @deppon/deppon-router popularity was classified as not popular.
We found that @deppon/deppon-router demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
GitHub Actions checkout now blocks risky pull_request_target checkouts by default to help prevent pwn request supply chain attacks.
Product
Socket now supports Custom Roles and Repository Access Permissions so organizations can control who can access specific repositories and actions.
Product
Socket MCP now lets AI assistants review org alerts, investigate threats using the Socket threat feed, and inspect package files in addition to dependency scoring.