この記事では主に vue vuex vue-rouert バックエンド プロジェクト - パーミッション ルーティングについて説明します。このバージョンは非常にシンプルで、必要な初心者に適しています。ご参考までに
プロジェクトアドレス: vue-simple-template
役割は全部で 3 つあります: adan barbara carrie パスワードはすべて: 123456
adan は最高の権限を持っています A. 彼は赤、黄、青を見ることができます。ページ (合計 3 ページ)
バーバラは許可 B を持っています。彼は赤と黄色のページを見ることができます。
キャリーは許可 C を持っています。彼は赤と青のページを見ることができます
vue- cil スキャフォールディングでプロジェクトを初期化した後、src フォルダーのみを変更しましたwebpack ---- 打包神器 vue ---- JavaScript 框架 vuex ---- 实现不同组件间的状态共享 vue-router ---- 页面路由 babel-polyfill ---- 将ES6代码转为ES5代码 normalize.css ---- 重置掉该重置的样式 element-ui ---- UI组件库
動的ルーティングの鍵は、ルーターによって設定されたメタフィールドと vuex の状態 (If理解できない場合は、まず公式ドキュメントを確認してください)router/index.js
# cd 到项目文件夹 cd weven-simple-template # 安装依赖 (本项目还安装了其他依赖详情 请见 package.json 文件) npm install # 运行项目 npm run dev
src ├── App.vue ---- 页面入口 ├── api ---- api请求 │ └── login.js ---- 模拟json对象数据 ├── assets ---- 主题 字体等静态资源 │ └── logo.png ├── components ---- 组件 │ ├── index.vue │ └── login.vue ├── main.js ---- 初始化组件 加载路由 ├── router ---- 路由 │ └── index.js └── store ---- vuex状态管理 ├── getters.js ├── index.js └── modules └── login.js
// 初始化路由 export default new Router({ routes: [ { path: '/login', name: 'Login', component: Login } ] }); // 动态路由 meta 定义了role export const powerRouter =[ { path: '/',redirect:'/red', name: 'index',component: Index,hidden:false, children: [ { path: '/red', name: 'red', component: red,}, { path: '/yellow', name: 'yellow', component: yellow, meta: {role: 'B'}}, { path: '/blue', name: 'blue', component: blue, meta: {role: 'C'}} ] } ];
Logins({ commit }, info){ return new Promise((resolve, reject) => { let data={}; loginByUserInfo.map(function (item) { //获取所以用户信息 if(info.username === item.username || info.pew === item.pew){ commit('SET_USERNAME',item.username); //将username和role进行存储 sessionStorage.setItem('USERNAME', item.username); //存入 session commit('SET_ROLE',item.role); sessionStorage.setItem('ROLE', item.role); return data={username:item.username,introduce:item.introduce}; }else{ return data; } }); resolve(data); }).catch(error => { reject(error); }); }, Roles({ commit }, newrouter){ return new Promise((resolve, reject) => { commit('SET_NEWROUER',newrouter); //存储最新路由 resolve(newrouter); }).catch(error => { reject(error); }); },
Logins({ commit }, info){ return new Promise((resolve, reject) => { let data={}; loginByUserInfo.map(function (item) { //获取所以用户信息 if(info.username === item.username || info.pew === item.pew){ commit('SET_USERNAME',item.username); //将username和role进行存储 sessionStorage.setItem('USERNAME', item.username); //存入 session commit('SET_ROLE',item.role); sessionStorage.setItem('ROLE', item.role); return data={username:item.username,introduce:item.introduce}; }else{ return data; } }); resolve(data); }).catch(error => { reject(error); }); }, Roles({ commit }, newrouter){ return new Promise((resolve, reject) => { commit('SET_NEWROUER',newrouter); //存储最新路由 resolve(newrouter); }).catch(error => { reject(error); }); },
関連記事: 画像のアップロードと圧縮機能をjsで実装する方法(詳細チュートリアル)
JSを使用して2つの時刻の差を計算する方法
vue-cliにjqueryを導入する方法webpack (詳細チュートリアル)
vueでのファイルの使い方について
pure jsでドロップダウンリストを生成する方法
以上がvue vuex vue-rouert 権限ルーティング (詳細なチュートリアル)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。