This commit is contained in:
wintel
2025-04-10 18:53:31 +08:00
2 changed files with 59 additions and 11 deletions

View File

@@ -2,21 +2,25 @@
上一章节通过添加模块或直接在路由表中添加固定路由实现路由控制。在有些场景下需要代码中直接打开一个外部指定URL的地址不通过系统的【模块管理】功能添加到导航栏如下图
![20220331231338](http://img.openauth.net.cn/20220331231338.png)
![2025-04-10-10-34-19](http://img.openauth.net.cn/2025-04-10-10-34-19.png)
可以直接使用下面代码实现:
```javascript
openUrl() {
let obj = {}
obj['openauth'] = { //这里的openauth可以改成你希望在浏览器地址栏中看到的url
name: '官网',
url: 'http://www.openauth.net.cn',
const openUrl = () => {
const routes = router.getRoutes()
routes.forEach(route => {
if (route.path === '/redirect/iframe') {
route.meta.title = 'OpenAuth.Net官网' // 设置标题
}
})
router.push({
path: '/redirect/iframe',
query: {
url: encodeURIComponent(`http://www.openauth.net.cn`) // 设置URL
}
})
}
this.$store.dispatch('setIframeTagViews', obj, { root: true })
this.$router.push({ path: '/iframePage/openauth' })
},
```

View File

@@ -1,5 +1,49 @@
# 项目结构
![20211215221811](http://img.openauth.net.cn/20211215221811.png)
OpenAuth.Net Vue3版本参考业界标准结构进行划分如需二次开发可以在对应的文件夹进行代码修改。结构如下
```
📦openauthvue3
┣ 📂mock //mock数据
┣ 📂public //公共资源
┣ 📂src
┃ ┣ 📂api //与后端接口交互
┃ ┣ 📂assets //样式图标等
┃ ┣ 📂components //组件
┃ ┣ 📂directive //指令
┃ ┣ 📂extensions //原有选项式mixins扩展组件
┃ ┣ 📂hooks //自定义hooks
┃ ┣ 📂interface //前端类型约定
┃ ┣ 📂layout //布局
┃ ┃ ┣ 📂components //站点Layout组件
┃ ┃ ┃ ┣ 📂Content //内容
┃ ┃ ┃ ┣ 📂Sidebar //侧边栏
┃ ┃ ┃ ┣ 📂Tagsbar //标签栏
┃ ┃ ┃ ┗ 📂Topbar //顶部栏
┃ ┣ 📂lib //外部引入的公共库
┃ ┣ 📂router //路由
┃ ┣ 📂store //状态管理
┃ ┣ 📂stores //pinia状态管理主题等
┃ ┣ 📂styles //样式
┃ ┣ 📂utils //通用工具类
┃ ┣ 📂views //视图
┃ ┣ 📜App.vue //主组件
┃ ┣ 📜default-settings.js //默认配置
┃ ┣ 📜error-log.js //错误日志
┃ ┣ 📜global-components.js //全局组件
┃ ┣ 📜main.js //主入口
┃ ┗ 📜permission.js //权限
┣ 📜.env.dev //开发环境配置
┣ 📜.env.production //生产环境配置
┣ 📜.eslintignore //eslint忽略文件
┣ 📜.eslintrc.js //eslint配置
┣ 📜.prettierrc.js //prettier配置
┣ 📜index.html //入口文件
┣ 📜jsconfig.json //js配置
┣ 📜package.json //项目配置
┣ 📜postcss.config.js //postcss配置
┣ 📜README.md //项目说明
┗ 📜vite.config.js //vite配置
```
整个vue的入口是main.js打包之编译后的代码全部会注入到index.html的`<div id="app"></div>`里面。