vuejs: làm trang admin
Chào mọi người, em có làm 1 project vuejs. Cho em hỏi làm trang admin như thế nào ? Đây là code hiện tại của em: app.vue
<template>
<div id="app">
<tour-header></tour-header>
<router-view></router-view>
<tour-footer style="margin-top: 60px"></tour-footer>
</div>
</template>
<script>
export default {
name: 'App',
data: () => ({
//
}),
};
</script>
route.js
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/destination',
name: 'Destination',
component: Destination
},
{
path: '/tour-detail',
name: 'TourDetail',
component: TourDetail
},
{
path: '/admin/login',
name: 'AdminLogin',
component: AdminLogin
},
]
nếu như trên thì khi vào /admin/login thì sẽ có header, footer của giao diện người dùng.
Cái em đang muốn là người dùng có giao diện riêng, trang admin login thì ko có header footer, còn trang admin thì giao diện riêng. Vậy phải làm sao ạ.
2 CÂU TRẢ LỜI
Vue router có trường meta
e có thể dùng trường đó để xác định ai là user thường ai là admin, đồng thời ở file cấu hình vue-router e viết thêm đoạn check beforeEach
, check trước khi vào 1 route xem ở meta
người đó có thoả mãn là user hay admin ko thì mới cho vào ko thì redirect đến 1 trang mặc định nào đó.
Xem ở link này nhé e: https://www.digitalocean.com/community/tutorials/how-to-set-up-vue-js-authentication-and-route-handling-using-vue-router
(kéo xuống dưới 1 chút đoạn cấu hình Vue router e sẽ thấy nhé)
@maitrungduc1410 tks a.
Bạn có thể xài thử thằng này: https://panjiachen.github.io/ Bạn đọc code của người ta rồi tham khảo cách viết của họ nhé. Rất bổ ích cho người mới tìm hiểu