极客观点
研发管理
HarmonyOS
问题：
- 项目启动后，使用useRouter()方法返回值为undefined
通过debug发现存在2个vue-router.mjs
如果使用
yarn link @ht/common方式引入common模块则不存在以上问题项目结构：
common // 公共模块
- route.js // 公共的router配置
- index.vue
- install.js
- package.json
system // 系统管理模块
- main.js
- router.js
- package.json
system依赖 common 模块，common做为公共依赖发布到内网的nexus中。
所以common的作用主要是管理通用的代码，组件和其他依赖的版本
common的package.json片段
{
"name": "@ht/common",
"version": "1.0.2",
"description": "应用端-公共",
"type": "module",
"main": "./index.js",
"module": "./index.js",
"scripts": {
"dev": "vite",
"svgToJson": "node svgToJson.js",
"build": "vite build",
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore",
"docs:dev": "vitepress dev docs --host 0.0.0.0",
"docs:build": "vitepress build docs",
"docs:preview": "vitepress preview docs"
},
"devDependencies": {
"@rushstack/eslint-patch": "^1.8.0",
"@vitejs/plugin-vue": "^5.0.4",
"@vue/eslint-config-prettier": "^9.0.0",
"eslint": "^8.57.0",
"eslint-plugin-vue": "^9.23.0",
"less": "^4.2.0",
"vite": "^5.2.8",
"vitepress": "^1.3.0"
},
"dependencies": {
"@element-plus/icons-vue": "^2.3.1",
"@huitian/cesium-helper": "^1.0.2",
"@iconify/tools": "^4.0.4",
"@iconify/vue": "^4.1.2",
"axios": "^1.7.2",
"components-extent": "^1.1.2-beta.7",
"echarts": "^5.5.1",
"echarts-liquidfill": "^3.1.0",
"element-plus": "^2.7.5",
"event-source-polyfill": "^1.0.31",
"nprogress": "^0.2.0",
"pinia": "^2.1.7",
"qs": "^6.12.1",
"vue": "^3.4.21",
"vue-router": "^4.3.3"
}
}system的package.json
{
"name": "system",
"version": "0.0.0",
"private": true,
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview",
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore"
},
"packageManager": "yarn@1.22.22",
"dependencies": {
"@ht/common": "^1.0.2",
"vue": "^3.4.21"
},
"devDependencies": {
"@vitejs/plugin-vue": "^5.0.4",
"eslint": "^8.57.0",
"eslint-plugin-vue": "^9.23.0",
"less": "^4.2.0",
"unplugin-auto-import": "^0.17.6",
"vite": "^5.2.8",
"vite-plugin-vue-devtools": "^7.0.25"
}
}common/route.js
import {createRouter, createWebHashHistory} from 'vue-router';
export let router;
let options = {
historyMode: createWebHashHistory(import.meta.env.BASE_URL),
};
/**
* 定义默认路由
*/
let defaultRoutes = [
{
path: '/401',
name: '401',
component: () => import('../components/401.vue')
},
];
export function createRoute(routes, opt){
Object.assign(options, opt);
if (options.historyMode instanceof Function) {
options.historyMode = options.historyMode(import.meta.env.BASE_URL);
}
// 创建路由
router = createRouter({
history: options.historyMode,
routes: [
...defaultRoutes,
...routes
],
});
if (import.meta.env.NODE_ENV == 'development') {
window.router = router;
}
return router;
}
export default router;common/index.vue
<template>
<div>
<router-view />
</div>
</template>
<script setup>
import {useRoute, useRouter} from 'vue-router';
let router = useRouter();
let route = useRoute();
console.log(router); // undefined
console.log(route); // undefined
</script>
<style scoped lang="less">
</style>common/install.js
import App from '@/App.vue';
import { createApp } from 'vue';
const app = createApp(App);
export default function createUseApp(mountBefore = () => {}) {
const app = createApp(App);
// ... 省略其他安装
mountBefore(app);
app.mount('#app');
return app;
}system/router.js
import {createRoute} from '@ht/common';
const routers = [
{
path: '/',
redirect: '/index',
component: () => import('@ht/common/index.vue'),
children: [
{
path: '/index',
name: '首页',
component: () => import('@/views/index.vue')
}
]
}
];
const router = createRoute(routers);
export default router;system/main.js
import CommonInstall from '@ht/common/install.js';
import router from './router.js';
CommonInstall(app => {
app.use(router);
});