-
Notifications
You must be signed in to change notification settings - Fork 25
Expand file tree
/
Copy pathvue2_route.html
More file actions
170 lines (160 loc) · 66.1 KB
/
vue2_route.html
File metadata and controls
170 lines (160 loc) · 66.1 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>菜单路由 | ruoyi-vue-pro 开发指南</title>
<meta name="generator" content="VuePress 1.9.2">
<link rel="icon" href="img_favicon.ico.html">
<script ></script>
<script ></script>
<script ></script>
<link rel="stylesheet" href="https://static.iocoder.cn/answer.css">
<meta name="description" content="RuoYi-Vue 全新 Pro 版本，优化重构所有功能。基于 Spring Boot + MyBatis Plus + Vue & Element 实现的后台管理系统 + 微信小程序，支持 RBAC 动态权限、数据权限、SaaS 多租户、Activiti + Flowable 工作流、三方登录、支付、短信、商城等功能。">
<meta name="keywords" content="ruoyi-vue,权限,数据权限,SaaS,多租户,Activiti,Flowable,工作流,商城">
<meta name="theme-color" content="#11a8cd">
<link rel="preload" >
<link rel="stylesheet" href="https://doc.iocoder.cn/assets/css/0.styles.7c54dcda.css">
</head>
<body class="theme-mode-light">
<div id="app" data-server-rendered="true"><div class="theme-container sidebar-open have-rightmenu"><header class="navbar blur"><div title="目录" class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="intro.html" class="home-link router-link-active"><img src="https://static.iocoder.cn/ruoyi-vue-pro-logo.png" alt="ruoyi-vue-pro 开发指南" class="logo"> <span class="site-name can-hide">ruoyi-vue-pro 开发指南（更新时间：2025-2-26）</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="开发指南" class="dropdown-title"><a href="intro.html" class="link-title">开发指南</a> <span class="title" style="display:none;">开发指南</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="intro.html" class="nav-link">萌新必读</a></li><li class="dropdown-item"><!----> <a href="module-new.html" class="nav-link">后端手册</a></li><li class="dropdown-item"><!----> <a href="message-queue_event.html" class="nav-link">中间件手册</a></li><li class="dropdown-item"><!----> <a href="bpm-preview.html" class="nav-link">工作流手册</a></li><li class="dropdown-item"><!----> <a href="report.html" class="nav-link">大屏手册</a></li><li class="dropdown-item"><!----> <a href="pay_build.html" class="nav-link">支付手册</a></li><li class="dropdown-item"><!----> <a href="member_build.html" class="nav-link">会员手册</a></li><li class="dropdown-item"><!----> <a href="mall_build.html" class="nav-link">商城手册</a></li><li class="dropdown-item"><!----> <a href="erp_build.html" class="nav-link">ERP 手册</a></li><li class="dropdown-item"><!----> <a href="crm_build.html" class="nav-link">CRM 手册</a></li><li class="dropdown-item"><!----> <a href="ai-preview.html" class="nav-link">AI 大模型手册</a></li><li class="dropdown-item"><!----> <a href="mp_build.html" class="nav-link">公众号手册</a></li><li class="dropdown-item"><!----> <a href="sms.html" class="nav-link">系统手册</a></li><li class="dropdown-item"><!----> <a href="dev-env.html" class="nav-link">运维手册</a></li><li class="dropdown-item"><!----> <a href="vue2_dev-spec.html" class="nav-link">前端手册 Vue 2.x</a></li><li class="dropdown-item"><!----> <a href="vue3_dev-spec.html" class="nav-link">前端手册 Vue 3.x</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="项目实战" class="dropdown-title"><a href="bpm.html" class="link-title">项目实战</a> <span class="title" style="display:none;">项目实战</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="bpm-preview.html" class="nav-link">工作流手册</a></li><li class="dropdown-item"><!----> <a href="report.html" class="nav-link">大屏手册</a></li><li class="dropdown-item"><!----> <a href="pay_build.html" class="nav-link">支付手册</a></li><li class="dropdown-item"><!----> <a href="member_build.html" class="nav-link">会员手册</a></li><li class="dropdown-item"><!----> <a href="mall_build.html" class="nav-link">商城手册</a></li><li class="dropdown-item"><!----> <a href="erp_build.html" class="nav-link">ERP 手册</a></li><li class="dropdown-item"><!----> <a href="crm_build.html" class="nav-link">CRM 手册</a></li><li class="dropdown-item"><!----> <a href="ai-preview.html" class="nav-link">AI 大模型手册</a></li><li class="dropdown-item"><!----> <a href="mp_build.html" class="nav-link">公众号手册</a></li><li class="dropdown-item"><!----> <a href="sms.html" class="nav-link">系统手册</a></li></ul></div></div><div class="nav-item"><a href="video.html" class="nav-link">视频教程</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="在线体验" class="dropdown-title"><!----> <span class="title" style="display:;">在线体验</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="http://dashboard-vue3.yudao.iocoder.cn/" target="_blank" rel="noopener noreferrer" class="nav-link external">
Vue3 + element-plus
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="http://dashboard-vben.yudao.iocoder.cn/" target="_blank" rel="noopener noreferrer" class="nav-link external">
Vue3 + vben(ant-design-vue)
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="http://dashboard.yudao.iocoder.cn/" target="_blank" rel="noopener noreferrer" class="nav-link external">
Vue2 + element-ui
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div></div><div class="nav-item"><a href="https://github.com/YunaiV/yudao-cloud" target="_blank" rel="noopener noreferrer" class="nav-link external">
微服务版
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://www.iocoder.cn/" target="_blank" rel="noopener noreferrer" class="nav-link external">
作者博客
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <a href="https://github.com/YunaiV/ruoyi-vue-pro" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar-hover-trigger"></div> <aside class="sidebar"><!----> <nav class="nav-links"><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="开发指南" class="dropdown-title"><a href="intro.html" class="link-title">开发指南</a> <span class="title" style="display:none;">开发指南</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="intro.html" class="nav-link">萌新必读</a></li><li class="dropdown-item"><!----> <a href="module-new.html" class="nav-link">后端手册</a></li><li class="dropdown-item"><!----> <a href="message-queue_event.html" class="nav-link">中间件手册</a></li><li class="dropdown-item"><!----> <a href="bpm-preview.html" class="nav-link">工作流手册</a></li><li class="dropdown-item"><!----> <a href="report.html" class="nav-link">大屏手册</a></li><li class="dropdown-item"><!----> <a href="pay_build.html" class="nav-link">支付手册</a></li><li class="dropdown-item"><!----> <a href="member_build.html" class="nav-link">会员手册</a></li><li class="dropdown-item"><!----> <a href="mall_build.html" class="nav-link">商城手册</a></li><li class="dropdown-item"><!----> <a href="erp_build.html" class="nav-link">ERP 手册</a></li><li class="dropdown-item"><!----> <a href="crm_build.html" class="nav-link">CRM 手册</a></li><li class="dropdown-item"><!----> <a href="ai-preview.html" class="nav-link">AI 大模型手册</a></li><li class="dropdown-item"><!----> <a href="mp_build.html" class="nav-link">公众号手册</a></li><li class="dropdown-item"><!----> <a href="sms.html" class="nav-link">系统手册</a></li><li class="dropdown-item"><!----> <a href="dev-env.html" class="nav-link">运维手册</a></li><li class="dropdown-item"><!----> <a href="vue2_dev-spec.html" class="nav-link">前端手册 Vue 2.x</a></li><li class="dropdown-item"><!----> <a href="vue3_dev-spec.html" class="nav-link">前端手册 Vue 3.x</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="项目实战" class="dropdown-title"><a href="bpm.html" class="link-title">项目实战</a> <span class="title" style="display:none;">项目实战</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="bpm-preview.html" class="nav-link">工作流手册</a></li><li class="dropdown-item"><!----> <a href="report.html" class="nav-link">大屏手册</a></li><li class="dropdown-item"><!----> <a href="pay_build.html" class="nav-link">支付手册</a></li><li class="dropdown-item"><!----> <a href="member_build.html" class="nav-link">会员手册</a></li><li class="dropdown-item"><!----> <a href="mall_build.html" class="nav-link">商城手册</a></li><li class="dropdown-item"><!----> <a href="erp_build.html" class="nav-link">ERP 手册</a></li><li class="dropdown-item"><!----> <a href="crm_build.html" class="nav-link">CRM 手册</a></li><li class="dropdown-item"><!----> <a href="ai-preview.html" class="nav-link">AI 大模型手册</a></li><li class="dropdown-item"><!----> <a href="mp_build.html" class="nav-link">公众号手册</a></li><li class="dropdown-item"><!----> <a href="sms.html" class="nav-link">系统手册</a></li></ul></div></div><div class="nav-item"><a href="video.html" class="nav-link">视频教程</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="在线体验" class="dropdown-title"><!----> <span class="title" style="display:;">在线体验</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="http://dashboard-vue3.yudao.iocoder.cn/" target="_blank" rel="noopener noreferrer" class="nav-link external">
Vue3 + element-plus
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="http://dashboard-vben.yudao.iocoder.cn/" target="_blank" rel="noopener noreferrer" class="nav-link external">
Vue3 + vben(ant-design-vue)
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="http://dashboard.yudao.iocoder.cn/" target="_blank" rel="noopener noreferrer" class="nav-link external">
Vue2 + element-ui
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div></div><div class="nav-item"><a href="https://github.com/YunaiV/yudao-cloud" target="_blank" rel="noopener noreferrer" class="nav-link external">
微服务版
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://www.iocoder.cn/" target="_blank" rel="noopener noreferrer" class="nav-link external">
作者博客
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <a href="https://github.com/YunaiV/ruoyi-vue-pro" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav> <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>萌新必读</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="intro.html" class="sidebar-link">简介</a></li><li><a href="qun.html" class="sidebar-link">交流群</a></li><li><a href="video.html" class="sidebar-link">视频教程</a></li><li><a href="feature.html" class="sidebar-link">功能列表</a></li><li><a href="quick-start.html" class="sidebar-link">快速启动（后端项目）</a></li><li><a href="quick-start-front.html" class="sidebar-link">快速启动（前端项目）</a></li><li><a href="api-doc.html" class="sidebar-link">接口文档</a></li><li><a href="technology.html" class="sidebar-link">技术选型</a></li><li><a href="project-intro.html" class="sidebar-link">项目结构</a></li><li><a href="dev-hot-swap.html" class="sidebar-link">代码热加载</a></li><li><a href="project-rename.html" class="sidebar-link">一键改包</a></li><li><a href="migrate-module.html" class="sidebar-link">迁移模块（适合新项目）</a></li><li><a href="delete-code.html" class="sidebar-link">删除功能（以租户为例）</a></li><li><a href="sql-update.html" class="sidebar-link">表结构变更（版本升级）</a></li><li><a href="xinchuang-db.html" class="sidebar-link">国产信创数据库（DM 达梦、大金、OpenGauss）</a></li><li><a href="remove-redis.html" class="sidebar-link">如何去除 Redis 缓存</a></li><li><a href="natapp.html" class="sidebar-link">内网穿透</a></li><li><a href="interview.html" class="sidebar-link">面试题、简历模版、简历优化</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>后端手册</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="module-new.html" class="sidebar-link">新建模块</a></li><li><a href="new-feature.html" class="sidebar-link">代码生成【单表】（新增功能）</a></li><li><a href="new-feature_master-sub.html" class="sidebar-link">代码生成【主子表】</a></li><li><a href="new-feature_tree.html" class="sidebar-link">代码生成（树表）</a></li><li><a href="resource-permission.html" class="sidebar-link">功能权限</a></li><li><a href="data-permission.html" class="sidebar-link">数据权限</a></li><li><a href="user-center.html" class="sidebar-link">用户体系</a></li><li><a href="social-user.html" class="sidebar-link">三方登录</a></li><li><a href="oauth2.html" class="sidebar-link">OAuth 2.0（SSO 单点登录)</a></li><li><a href="saas-tenant.html" class="sidebar-link">SaaS 多租户【字段隔离】</a></li><li><a href="saas-tenant_dynamic.html" class="sidebar-link">SaaS 多租户【数据库隔离】</a></li><li><a href="websocket.html" class="sidebar-link">WebSocket 实时通信</a></li><li><a href="exception.html" class="sidebar-link">异常处理（错误码）</a></li><li><a href="validator.html" class="sidebar-link">参数校验、时间传参</a></li><li><a href="page-feature.html" class="sidebar-link">分页实现</a></li><li><a href="vo.html" class="sidebar-link">VO 对象转换、数据翻译</a></li><li><a href="file.html" class="sidebar-link">文件存储（上传下载）</a></li><li><a href="excel-import-and-export.html" class="sidebar-link">Excel 导入导出</a></li><li><a href="system-log.html" class="sidebar-link">操作日志、访问日志、异常日志</a></li><li><a href="mybatis.html" class="sidebar-link">MyBatis 数据库</a></li><li><a href="mybatis-pro.html" class="sidebar-link">MyBatis 联表&分页查询</a></li><li><a href="dynamic-datasource.html" class="sidebar-link">多数据源（读写分离）、事务</a></li><li><a href="redis-cache.html" class="sidebar-link">Redis 缓存</a></li><li><a href="local-cache.html" class="sidebar-link">本地缓存</a></li><li><a href="async-task.html" class="sidebar-link">异步任务</a></li><li><a href="distributed-lock.html" class="sidebar-link">分布式锁</a></li><li><a href="idempotent.html" class="sidebar-link">幂等性（防重复提交）</a></li><li><a href="rate-limiter.html" class="sidebar-link">请求限流（RateLimiter）</a></li><li><a href="http-sign.html" class="sidebar-link">HTTP 接口签名（防篡改）</a></li><li><a href="unit-test.html" class="sidebar-link">单元测试</a></li><li><a href="captcha.html" class="sidebar-link">验证码</a></li><li><a href="util.html" class="sidebar-link">工具类 Util</a></li><li><a href="config-center.html" class="sidebar-link">配置管理</a></li><li><a href="db-doc.html" class="sidebar-link">数据库文档</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>中间件手册</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="job.html" class="sidebar-link">定时任务</a></li><li><a href="message-queue_event.html" class="sidebar-link">消息队列（内存）</a></li><li><a href="message-queue_redis.html" class="sidebar-link">消息队列（Redis）</a></li><li><a href="message-queue_rocketmq.html" class="sidebar-link">消息队列（RocketMQ）</a></li><li><a href="message-queue_rabbitmq.html" class="sidebar-link">消息队列（RabbitMQ）</a></li><li><a href="message-queue_kafka.html" class="sidebar-link">消息队列（Kafka）</a></li><li><a href="server-protection.html" class="sidebar-link">限流熔断</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>工作流手册</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="bpm-preview.html" class="sidebar-link">工作流演示</a></li><li><a href="bpm.html" class="sidebar-link">功能开启</a></li><li><a href="bpm_dameng.html" class="sidebar-link">工作流（达梦适配）</a></li><li><a href="bpm_use-bpm-form.html" class="sidebar-link">审批接入（流程表单）</a></li><li><a href="bpm_use-business-form.html" class="sidebar-link">审批接入（业务表单）</a></li><li><a href="bpm_model-designer-bpmn.html" class="sidebar-link">流程设计器（BPMN）</a></li><li><a href="bpm_model-designer-dingding.html" class="sidebar-link">流程设计器（钉钉、飞书）</a></li><li><a href="bpm_assignee.html" class="sidebar-link">选择审批人、发起人自选</a></li><li><a href="bpm_multi-instance.html" class="sidebar-link">会签、或签、依次审批</a></li><li><a href="bpm_process-instance.html" class="sidebar-link">流程发起、取消、重新发起</a></li><li><a href="bpm_task-todo-done.html" class="sidebar-link">审批通过、不通过、驳回</a></li><li><a href="bpm_sign.html" class="sidebar-link">审批加签、减签</a></li><li><a href="bpm_task-delegation-and-cc.html" class="sidebar-link">审批转办、委派、抄送</a></li><li><a href="bpm_listener.html" class="sidebar-link">执行监听器、任务监听器</a></li><li><a href="bpm_expression.html" class="sidebar-link">流程表达式</a></li><li><a href="bpm_message.html" class="sidebar-link">流程审批通知</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>大屏手册</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="report.html" class="sidebar-link">报表设计器</a></li><li><a href="report_screen.html" class="sidebar-link">大屏设计器</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>支付手册</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="pay_build.html" class="sidebar-link">功能开启</a></li><li><a href="pay_alipay-pay-demo.html" class="sidebar-link">支付宝支付接入</a></li><li><a href="pay_wx-pub-pay-demo.html" class="sidebar-link">微信公众号支付接入</a></li><li><a href="pay_wx-lite-pay-demo.html" class="sidebar-link">微信小程序支付接入</a></li><li><a href="pay_refund-demo.html" class="sidebar-link">支付宝、微信退款接入</a></li><li><a href="pay_wallet.html" class="sidebar-link">钱包充值、支付、退款</a></li><li><a href="pay_mock.html" class="sidebar-link">模拟支付、退款</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>会员手册</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="member_build.html" class="sidebar-link">功能开启</a></li><li><a href="member_weixin-mp-login.html" class="sidebar-link">微信公众号登录</a></li><li><a href="member_weixin-lite-login.html" class="sidebar-link">微信小程序登录</a></li><li><a href="member_weixin-lite-subscribe-message.html" class="sidebar-link">微信小程序订阅消息</a></li><li><a href="member_weixin-lite-qrcode.html" class="sidebar-link">微信小程序码</a></li><li><a href="member_user.html" class="sidebar-link">会员用户、标签、分组</a></li><li><a href="member_level.html" class="sidebar-link">会员等级、积分、签到</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>商城手册</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="mall-preview.html" class="sidebar-link">商城演示</a></li><li><a href="mall_build.html" class="sidebar-link">功能开启</a></li><li><a href="mall_diy.html" class="sidebar-link">商城装修</a></li><li><a href="mall_kefu.html" class="sidebar-link">在线客服</a></li><li><a href="mall_product-category.html" class="sidebar-link">【商品】商品分类</a></li><li><a href="mall_product-property.html" class="sidebar-link">【商品】商品属性</a></li><li><a href="mall_product-spu-sku.html" class="sidebar-link">【商品】商品 SPU 与 SKU</a></li><li><a href="mall_product-comment.html" class="sidebar-link">【商品】商品评价</a></li><li><a href="mall_trade-cart.html" class="sidebar-link">【交易】购物车</a></li><li><a href="mall_trade-order.html" class="sidebar-link">【交易】交易订单</a></li><li><a href="mall_trade-aftersale.html" class="sidebar-link">【交易】售后退款</a></li><li><a href="mall_trade-delivery-express.html" class="sidebar-link">【交易】快递发货</a></li><li><a href="mall_trade-delivery-pickup.html" class="sidebar-link">【交易】门店自提</a></li><li><a href="mall_trade-brokerage.html" class="sidebar-link">【交易】分销返佣</a></li><li><a href="mall_promotion-coupon.html" class="sidebar-link">【营销】优惠劵</a></li><li><a href="mall_point-activity.html" class="sidebar-link">【营销】积分商城</a></li><li><a href="mall_promotion-combination.html" class="sidebar-link">【营销】拼团活动</a></li><li><a href="mall_promotion-seckill.html" class="sidebar-link">【营销】秒杀活动</a></li><li><a href="mall_promotion-bargain.html" class="sidebar-link">【营销】砍价活动</a></li><li><a href="mall_promotion-record.html" class="sidebar-link">【营销】满减送活动</a></li><li><a href="mall_promotion-discount.html" class="sidebar-link">【营销】限时折扣</a></li><li><a href="mall_promotion-content.html" class="sidebar-link">【营销】内容管理</a></li><li><a href="mall_statistics.html" class="sidebar-link">【统计】会员、商品、交易统计</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>ERP手册</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="erp-preview.html" class="sidebar-link">ERP 演示</a></li><li><a href="erp_build.html" class="sidebar-link">功能开启</a></li><li><a href="erp_product.html" class="sidebar-link">【产品】产品信息、分类、单位</a></li><li><a href="erp_stock.html" class="sidebar-link">【库存】产品库存、库存明细</a></li><li><a href="erp_stock-in-out.html" class="sidebar-link">【库存】其它入库、其它出库</a></li><li><a href="erp_stock-move-check.html" class="sidebar-link">【库存】库存调拨、库存盘点</a></li><li><a href="erp_purchase.html" class="sidebar-link">【采购】采购订单、入库、退货</a></li><li><a href="erp_sale.html" class="sidebar-link">【销售】销售订单、出库、退货</a></li><li><a href="sale_finance-payment-receipt.html" class="sidebar-link">【财务】采购付款、销售收款</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>CRM手册</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="crm-preview.html" class="sidebar-link">CRM 演示</a></li><li><a href="crm_build.html" class="sidebar-link">功能开启</a></li><li><a href="crm_clue.html" class="sidebar-link">【线索】线索管理</a></li><li><a href="crm_customer.html" class="sidebar-link">【客户】客户管理、公海客户</a></li><li><a href="crm_business.html" class="sidebar-link">【商机】商机管理、商机状态</a></li><li><a href="crm_contract.html" class="sidebar-link">【合同】合同管理、合同提醒</a></li><li><a href="crm_receivable.html" class="sidebar-link">【回款】回款管理、回款计划</a></li><li><a href="crm_product.html" class="sidebar-link">【产品】产品管理、产品分类</a></li><li><a href="crm_permission.html" class="sidebar-link">【通用】数据权限</a></li><li><a href="crm_follow-up.html" class="sidebar-link">【通用】跟进记录、待办事项</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>AI大模型手册</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="ai-preview.html" class="sidebar-link">AI 大模型演示</a></li><li><a href="ai_build.html" class="sidebar-link">功能开启</a></li><li><a href="ai_chat.html" class="sidebar-link">AI 聊天对话</a></li><li><a href="ai_image.html" class="sidebar-link">AI 绘画创作</a></li><li><a href="ai_music.html" class="sidebar-link">AI 音乐创作</a></li><li><a href="ai_write.html" class="sidebar-link">AI 写作助手</a></li><li><a href="ai_mindmap.html" class="sidebar-link">AI 思维导图</a></li><li><a href="ai_openai.html" class="sidebar-link">【模型接入】OpenAI</a></li><li><a href="ai_tongyi.html" class="sidebar-link">【模型接入】通义千问</a></li><li><a href="ai_deep-seek.html" class="sidebar-link">【模型接入】DeepSeek</a></li><li><a href="ai_doubao.html" class="sidebar-link">【模型接入】字节豆包</a></li><li><a href="ai_hunyuan.html" class="sidebar-link">【模型接入】腾讯混元</a></li><li><a href="ai_siliconflow.html" class="sidebar-link">【模型接入】硅基流动</a></li><li><a href="ai_yiyan.html" class="sidebar-link">【模型接入】文心一言</a></li><li><a href="ai_llama.html" class="sidebar-link">【模型接入】LLAMA</a></li><li><a href="ai_glm.html" class="sidebar-link">【模型接入】智谱 GLM</a></li><li><a href="ai_xinghuo.html" class="sidebar-link">【模型接入】讯飞星火</a></li><li><a href="ai_azure-openai.html" class="sidebar-link">【模型接入】微软 OpenAI</a></li><li><a href="ai_gemini.html" class="sidebar-link">【模型接入】谷歌 Gemini</a></li><li><a href="ai_stable-diffusion.html" class="sidebar-link">【模型接入】Stable Diffusion</a></li><li><a href="ai_midjourney.html" class="sidebar-link">【模型接入】Midjourney</a></li><li><a href="ai_suno.html" class="sidebar-link">【模型接入】Suno</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>公众号手册</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="mp_build.html" class="sidebar-link">功能开启</a></li><li><a href="mp_account.html" class="sidebar-link">公众号接入</a></li><li><a href="mp_user.html" class="sidebar-link">公众号粉丝</a></li><li><a href="mp_tag.html" class="sidebar-link">公众号标签</a></li><li><a href="mp_message.html" class="sidebar-link">公众号消息</a></li><li><a href="mp_auto-reply.html" class="sidebar-link">自动回复</a></li><li><a href="mp_menu.html" class="sidebar-link">公众号菜单</a></li><li><a href="mp_material.html" class="sidebar-link">公众号素材</a></li><li><a href="mp_article.html" class="sidebar-link">公众号图文</a></li><li><a href="mp_statistics.html" class="sidebar-link">公众号统计</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>系统手册</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="sms.html" class="sidebar-link">短信配置</a></li><li><a href="mail.html" class="sidebar-link">邮件配置</a></li><li><a href="notify.html" class="sidebar-link">站内信配置</a></li><li><a href="desensitize.html" class="sidebar-link">数据脱敏、字段权限</a></li><li><a href="sensitive-word.html" class="sidebar-link">敏感词</a></li><li><a href="area-and-ip.html" class="sidebar-link">地区 & IP 库</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>运维手册</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="dev-env.html" class="sidebar-link">开发环境</a></li><li><a href="deployment-linux.html" class="sidebar-link">Linux 部署</a></li><li><a href="deployment-docker.html" class="sidebar-link">Docker 部署</a></li><li><a href="deployment-jenkins.html" class="sidebar-link">Jenkins 部署</a></li><li><a href="deployment-baota.html" class="sidebar-link">宝塔部署</a></li><li><a href="https.html" class="sidebar-link">HTTPS 证书</a></li><li><a href="server-monitor.html" class="sidebar-link">服务监控</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>前端手册 Vue 3.x</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="vue3_dev-spec.html" class="sidebar-link">开发规范</a></li><li><a href="vue3_route.html" class="sidebar-link">菜单路由</a></li><li><a href="vue3_icon.html" class="sidebar-link">Icon 图标</a></li><li><a href="vue3_dict.html" class="sidebar-link">字典数据</a></li><li><a href="vue3_components.html" class="sidebar-link">系统组件</a></li><li><a href="vue3_util.html" class="sidebar-link">通用方法</a></li><li><a href="vue3_config-center.html" class="sidebar-link">配置读取</a></li><li><a href="vue3_crud-schema.html" class="sidebar-link">CRUD 组件</a></li><li><a href="vue3_i18n.html" class="sidebar-link">国际化</a></li><li><a href="vue3_debugger.html" class="sidebar-link">IDE 调试</a></li><li><a href="vue3_format.html" class="sidebar-link">代码格式化</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>前端手册 Vue 2.x</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="vue2_dev-spec.html" class="sidebar-link">开发规范</a></li><li><a href="vue2_route.html" aria-current="page" class="active sidebar-link">菜单路由</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header level2"><a href="vue2/route_#_1-路由配置.html" class="sidebar-link">1. 路由配置</a></li><li class="sidebar-sub-header level2"><a href="vue2/route_#_2-路由.html" class="sidebar-link">2. 路由</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header level3"><a href="vue2/route_#_2-1-静态路由.html" class="sidebar-link">2.1 静态路由</a></li><li class="sidebar-sub-header level3"><a href="vue2/route_#_2-2-动态路由.html" class="sidebar-link">2.2 动态路由</a></li><li class="sidebar-sub-header level3"><a href="vue2/route_#_2-3-路由跳转.html" class="sidebar-link">2.3 路由跳转</a></li></ul></li><li class="sidebar-sub-header level2"><a href="vue2/route_#_3-菜单管理.html" class="sidebar-link">3. 菜单管理</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header level3"><a href="vue2/route_#_3-1-新增目录.html" class="sidebar-link">3.1 新增目录</a></li><li class="sidebar-sub-header level3"><a href="vue2/route_#_3-2-新增菜单.html" class="sidebar-link">3.2 新增菜单</a></li><li class="sidebar-sub-header level3"><a href="vue2/route_#_3-3-新增按钮.html" class="sidebar-link">3.3 新增按钮</a></li></ul></li><li class="sidebar-sub-header level2"><a href="vue2/route_#_4-权限控制.html" class="sidebar-link">4. 权限控制</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header level3"><a href="vue2/route_#_4-1-v-haspermi-指令.html" class="sidebar-link">4.1 v-hasPermi 指令</a></li><li class="sidebar-sub-header level3"><a href="vue2/route_#_4-2-v-hasrole-指令.html" class="sidebar-link">4.2 v-hasRole 指令</a></li><li class="sidebar-sub-header level3"><a href="vue2/route_#_4-3-结合-v-if-指令.html" class="sidebar-link">4.3 结合 v-if 指令</a></li></ul></li><li class="sidebar-sub-header level2"><a href="vue2/route_#_5-页面缓存.html" class="sidebar-link">5. 页面缓存</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header level3"><a href="vue2/route_#_5-1-静态路由的示例.html" class="sidebar-link">5.1 静态路由的示例</a></li><li class="sidebar-sub-header level3"><a href="vue2/route_#_5-2-动态路由的示例.html" class="sidebar-link">5.2 动态路由的示例</a></li></ul></li></ul></li><li><a href="vue2_icon.html" class="sidebar-link">Icon 图标</a></li><li><a href="vue2_dict.html" class="sidebar-link">字典数据</a></li><li><a href="vue2_components.html" class="sidebar-link">系统组件</a></li><li><a href="vue2_util.html" class="sidebar-link">通用方法</a></li><li><a href="vue2_config-center.html" class="sidebar-link">配置读取</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>更新日志</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="changelog_2.4.2.html" class="sidebar-link">【v2.4.2】开发中</a></li><li><a href="changelog_2.4.1.html" class="sidebar-link">【v2.4.1】2025-02-09</a></li><li><a href="changelog_2.4.0.html" class="sidebar-link">【v2.4.0】2024-12-31</a></li><li><a href="changelog_2.3.0.html" class="sidebar-link">【v2.3.0】2024-10-07</a></li><li><a href="changelog_2.2.0.html" class="sidebar-link">【v2.2.0】2024-08-02</a></li><li><a href="changelog_2.1.0.html" class="sidebar-link">【v2.1.0】2024-05-05</a></li><li><a href="changelog_2.0.1.html" class="sidebar-link">【v2.0.1】2024-03-01</a></li><li><a href="changelog_2.0.0.html" class="sidebar-link">【v2.0.0】2024-01-26</a></li></ul></section></li></ul> </aside> <div><main class="page"><div class="theme-vdoing-wrapper "><div class="articleInfo-wrap" data-v-06225672><div class="articleInfo" data-v-06225672><ul class="breadcrumbs" data-v-06225672><li data-v-06225672><a href="intro.html" title="首页" class="iconfont icon-home router-link-active" data-v-06225672></a></li> <li data-v-06225672><span data-v-06225672>开发指南</span></li><li data-v-06225672><span data-v-06225672>前端手册 Vue 2.x</span></li></ul> <div class="info" data-v-06225672><div title="作者" class="author iconfont icon-touxiang" data-v-06225672><a href="https://www.iocoder.cn" target="_blank" title="作者" class="beLink" data-v-06225672>芋道源码</a></div> <div title="创建时间" class="date iconfont icon-riqi" data-v-06225672><a href="javascript:;" data-v-06225672>2022-04-17</a></div> <!----></div></div></div> <!----> <div class="content-wrapper"><div class="right-menu-wrapper"><div class="right-menu-margin"><div class="right-menu-title">目录</div> <div class="right-menu-content"></div></div></div> <h1><img ><code><span class="token comment">// 当设置 true 的时候该路由不会在侧边栏出现 如 401，login 等页面，或者如一些编辑页面 /edit/1</span>
<span class="token literal-property property">hidden</span><span class="token operator">:</span> <span class="token boolean">true</span> <span class="token comment">// (默认 false)</span>
<span class="token comment">// 当设置 noRedirect 的时候该路由在面包屑导航中不可被点击</span>
<span class="token literal-property property">redirect</span><span class="token operator">:</span> <span class="token string">'noRedirect'</span>
<span class="token comment">// 1. 当你一个路由下面的 children 声明的路由大于 1 个时，自动会变成嵌套的模式。例如说，组件页面</span>
<span class="token comment">// 2. 只有一个时，会将那个子路由当做根路由显示在侧边栏。例如说，如引导页面</span>
<span class="token comment">// 若你想不管路由下面的 children 声明的个数都显示你的根路由，</span>
<span class="token comment">// 你可以设置 alwaysShow: true，这样它就会忽略之前定义的规则，一直显示根路由</span>
<span class="token literal-property property">alwaysShow</span><span class="token operator">:</span> <span class="token boolean">true</span>
<span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'router-name'</span> <span class="token comment">// 设定路由的名字，一定要填写不然使用 <keep-alive> 时会出现各种问题</span>
<span class="token literal-property property">meta</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token literal-property property">roles</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'admin'</span><span class="token punctuation">,</span> <span class="token string">'editor'</span><span class="token punctuation">]</span> <span class="token comment">// 设置该路由进入的权限，支持多个权限叠加</span>
<span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">'title'</span> <span class="token comment">// 设置该路由在侧边栏和面包屑中展示的名字</span>
<span class="token literal-property property">icon</span><span class="token operator">:</span> <span class="token string">'svg-name'</span> <span class="token comment">// 设置该路由的图标，支持 svg-class，也支持 el-icon-x element-ui 的 icon</span>
<span class="token literal-property property">noCache</span><span class="token operator">:</span> <span class="token boolean">true</span> <span class="token comment">// 如果设置为 true，则不会被 <keep-alive> 缓存(默认 false)</span>
<span class="token literal-property property">breadcrumb</span><span class="token operator">:</span> <span class="token boolean">false</span> <span class="token comment">// 如果设置为 false，则不会在breadcrumb面包屑中显示(默认 true)</span>
<span class="token literal-property property">affix</span><span class="token operator">:</span> <span class="token boolean">true</span> <span class="token comment">// 如果设置为 true，它则会固定在 tags-view 中(默认 false)</span>
<span class="token comment">// 当路由设置了该属性，则会高亮相对应的侧边栏。</span>
<span class="token comment">// 这在某些场景非常有用，比如：一个文章的列表页路由为：/article/list</span>
<span class="token comment">// 点击文章进入文章详情页，这时候路由为 /article/1，但你想在侧边栏高亮文章列表的路由，就可以进行如下设置</span>
<span class="token literal-property property">activeMenu</span><span class="token operator">:</span> <span class="token string">'/article/list'</span>
<span class="token punctuation">}</span>
</code></pre></div><p>普通示例</p> <div class="language-JSON extra-class"><pre class="language-json"><code><span class="token punctuation">{</span>
path<span class="token operator">:</span> '/system/test'<span class="token punctuation">,</span>
component<span class="token operator">:</span> Layout<span class="token punctuation">,</span>
redirect<span class="token operator">:</span> 'noRedirect'<span class="token punctuation">,</span>
hidden<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
alwaysShow<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
meta<span class="token operator">:</span> <span class="token punctuation">{</span> title<span class="token operator">:</span> '系统管理'<span class="token punctuation">,</span> icon <span class="token operator">:</span> <span class="token string">"system"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
children<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>
path<span class="token operator">:</span> 'index'<span class="token punctuation">,</span>
component<span class="token operator">:</span> (resolve) => require(<span class="token punctuation">[</span>'@/views/index'<span class="token punctuation">]</span><span class="token punctuation">,</span> resolve)<span class="token punctuation">,</span>
name<span class="token operator">:</span> 'Test'<span class="token punctuation">,</span>
meta<span class="token operator">:</span> <span class="token punctuation">{</span>
title<span class="token operator">:</span> '测试管理'<span class="token punctuation">,</span>
icon<span class="token operator">:</span> 'user'
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">]</span>
<span class="token punctuation">}</span>
</code></pre></div><p>外链示例</p> <div class="language-JSON extra-class"><pre class="language-json"><code><span class="token punctuation">{</span>
path<span class="token operator">:</span> 'https<span class="token operator">:</span><span class="token comment">//www.iocoder.cn',</span>
meta<span class="token operator">:</span> <span class="token punctuation">{</span> title<span class="token operator">:</span> '芋道源码'<span class="token punctuation">,</span> icon <span class="token operator">:</span> <span class="token string">"guide"</span> <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><h2 id="_2-路由"><a target="_blank" rel="noopener noreferrer">@/router/index.js<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 的 <code>constantRoutes</code>，就是配置对应的公共路由。如下图所示：</p> <p><img ><code><span class="token comment">// 简单跳转</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>$router<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">"/system/user"</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// 跳转页面并设置请求参数，使用 `query` 属性</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>$router<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">"/system/user"</span><span class="token punctuation">,</span> <span class="token literal-property property">query</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token string">"1"</span><span class="token punctuation">,</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">"芋道"</span><span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h2 id="_3-菜单管理"><a href="#_3-菜单管理" class="header-anchor">#</a> 3. 菜单管理</h2> <p>项目的菜单在 [系统管理 -> 菜单管理] 进行管理，支持<strong>无限</strong>层级，提供目录、菜单、按钮三种类型。如下图所示：</p> <p><img target="_blank" rel="noopener noreferrer"><code>v-hasPermi</code><span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 指令，基于权限字符，进行权限的控制。</p> <div class="language-HTML extra-class"><pre class="language-html"><code><span class="token comment"><!-- 单个 --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-button</span> <span class="token attr-name">v-hasPermi</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>['system:user:create']<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>存在权限字符串才能看到<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>el-button</span><span class="token punctuation">></span></span>
<span class="token comment"><!-- 多个，满足任一一个即可 --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-button</span> <span class="token attr-name">v-hasPermi</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>['system:user:create', 'system:user:update']<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>包含权限字符串才能看到<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>el-button</span><span class="token punctuation">></span></span>
</code></pre></div><h3 id="_4-2-v-hasrole-指令"><a target="_blank" rel="noopener noreferrer"><code>v-hasRole</code><span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 指令，基于角色标识，机进行的控制。</p> <div class="language-HTML extra-class"><pre class="language-html"><code><span class="token comment"><!-- 单个 --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-button</span> <span class="token attr-name">v-hasRole</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>['admin']<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>管理员才能看到<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>el-button</span><span class="token punctuation">></span></span>
<span class="token comment"><!-- 多个，满足任一一个即可 --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-button</span> <span class="token attr-name">v-hasRole</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>['role1', 'role2']<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>包含角色才能看到<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>el-button</span><span class="token punctuation">></span></span>
</code></pre></div><h3 id="_4-3-结合-v-if-指令"><a href="#_4-3-结合-v-if-指令" class="header-anchor">#</a> 4.3 结合 v-if 指令</h3> <p>在某些情况下，它是不适合使用 <code>v-hasPermi</code> 或 <code>v-hasRole</code> 指令，如元素标签组件。此时，只能通过手动设置 <code>v-if</code>，通过使用全局权限判断函数，用法是基本一致的。</p> <div class="language-HTML extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-tabs</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-tab-pane</span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>checkPermi(['system:user:create'])<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>用户管理<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>user<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>用户管理<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>el-tab-pane</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-tab-pane</span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>checkPermi(['system:user:create', 'system:user:update'])<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>参数管理<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>menu<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>参数管理<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>el-tab-pane</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-tab-pane</span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>checkRole(['admin'])<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>角色管理<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>role<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>角色管理<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>el-tab-pane</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>el-tab-pane</span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>checkRole(['admin','common'])<span class="token punctuation">"</span></span> <span class="token attr-name">label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>定时任务<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>job<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>定时任务<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>el-tab-pane</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>el-tabs</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">import</span> <span class="token punctuation">{</span> checkPermi<span class="token punctuation">,</span> checkRole <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"@/utils/permission"</span><span class="token punctuation">;</span> <span class="token comment">// 权限判断函数</span>
<span class="token keyword">export</span> <span class="token keyword">default</span><span class="token punctuation">{</span>
<span class="token literal-property property">methods</span><span class="token operator">:</span> <span class="token punctuation">{</span>
checkPermi<span class="token punctuation">,</span>
checkRole
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
</code></pre></div><h2 id="_5-页面缓存"><a ><code><span class="token punctuation">{</span>
<span class="token literal-property property">path</span><span class="token operator">:</span> <span class="token string">'create-form'</span><span class="token punctuation">,</span>
<span class="token function-variable function">component</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=></span><span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">'@/views/form/create'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'createForm'</span><span class="token punctuation">,</span>
<span class="token literal-property property">meta</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">'createForm'</span><span class="token punctuation">,</span> <span class="token literal-property property">icon</span><span class="token operator">:</span> <span class="token string">'table'</span> <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre></div><p>② view component 的 <code>name</code> 声明如下：</p> <div class="language-JS extra-class"><pre class="language-js"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
<span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'createForm'</span>
<span class="token punctuation">}</span>
</code></pre></div><p>一定要保证两者的名字相同，切记写重或者写错。默认如果不写 <code>name</code> 就不会被缓存，详情见 <a href="https://github.com/vuejs/vue/issues/6938#issuecomment-345728620" target="_blank" rel="noopener noreferrer">issue<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>。</p> <h3 id="_5-2-动态路由的示例"><a href="#_5-2-动态路由的示例" class="header-anchor">#</a> 5.2 动态路由的示例</h3> <p><img src="https://doc.iocoder.cn/img/Vue2/%E8%8F%9C%E5%8D%95%E8%B7%AF%E7%94%B1/09.png" alt="示例"></p></div></div> <div class="page-slot page-slot-bottom">
<div class="wwads-cn wwads-horizontal pageB" data-id="136" style="width:100%;max-height:80px;min-height:auto;"></div>
<style>
.pageB img{width:80px!important;}
.wwads-horizontal .wwads-text, .wwads-content .wwads-text{line-height:1;}
</style>
</div> <div class="page-edit"><!----> <!----> <!----></div> <div class="page-nav-wapper"><div class="page-nav-centre-wrap"><a href="vue2_dev-spec.html" class="page-nav-centre page-nav-centre-prev"><div class="tooltip">开发规范</div></a> <a href="vue2_icon.html" class="page-nav-centre page-nav-centre-next"><div class="tooltip">Icon 图标</div></a></div> <div class="page-nav"><p class="inner"><span class="prev">
←
<a href="vue2_dev-spec.html" class="prev">开发规范</a></span> <span class="next"><a href="vue2_icon.html">Icon 图标</a>→
</span></p></div></div></div> <!----></main></div> <div class="footer"><div class="icons"><a href="mailto:7685413@qq.com" title="发邮件" target="_blank" class="iconfont icon-youjian"></a><a href="https://github.com/YunaiV" title="GitHub" target="_blank" class="iconfont icon-github"></a><a href="https://www.iocoder.cn/?yudao" title="博客" target="_blank" class="iconfont icon-erji"></a></div>
Theme by
<a href="https://github.com/xugaoyi/vuepress-theme-vdoing" target="_blank" title="本站主题">Vdoing</a>
| Copyright © 2019-2025
<span>芋道源码 | MIT License</span></div> <div class="buttons"><div title="返回顶部" class="button blur go-to-top iconfont icon-fanhuidingbu" style="display:none;"></div> <div title="去评论" class="button blur go-to-comment iconfont icon-pinglun" style="display:none;"></div> <div title="主题模式" class="button blur theme-mode-but iconfont icon-zhuti"><ul class="select-box" style="display:none;"><li class="iconfont icon-zidong">
跟随系统
</li><li class="iconfont icon-rijianmoshi">
浅色模式
</li><li class="iconfont icon-yejianmoshi">
深色模式
</li><li class="iconfont icon-yuedu">
阅读模式
</li></ul></div></div> <!----> <!----> <div class="custom-html-window custom-html-window-rb" style="display:;"><div class="custom-wrapper"><span class="close-but">×</span> <div>
<div class="wwads-cn wwads-vertical windowRB" data-id="136" style="max-width:160px;
min-width: auto;min-height:auto;"></div>
<style>
.windowRB{ padding: 0;}
.windowRB .wwads-img{margin-top: 10px;}
.windowRB .wwads-content{margin: 0 10px 10px 10px;}
.custom-html-window-rb .close-but{
display: none;
}
</style>
</div></div></div></div><div class="global-ui"></div></div>
<script defer></script>
</body>
</html>