π Navigation Guard?
μ μ κ°λ
router.beforeEach
λ₯Ό μ¬μ©ν΄μ λͺ¨λ λΌμ°ν° κ°μ²΄μ κ°λλ₯Ό μ μ©ν©λλ€.
λ°λΌμ λ€λΉκ²μ΄μ
μ΄ νΈλ¦¬κ±° λ λλ§λ€ μ΄λ€ λΌμ°νΈκ° λ°μνλμ§ μ νμκ° μλλ° μ΄λ₯Ό μν΄ λ€μ μΈ κ°μ§ μΈμλ₯Ό μ λ¬λ°μ΅λλ€.
- to :
to
μ ν΄λΉνλ λΌμ°νΈ κ°μ²΄λ‘ λ€μμ μ΄λ - from : νμ¬ λΌμ°ν°λ‘ μ€κΈ° μ΄μ μ λΌμ°νΈ
- next : ν
μ ν΄κ²°νκΈ° μν΄ νΈμΆλ©λλ€. λμ λ°©μμ
next
μ μ λ¬νλ μΈμμ λ°λΌ λ¬λΌμ§λλ€.
next()
ν¨μμ κ²½μ° νΈμΆλμ§ μμΌλ©΄ ν
μ΄ μ λ λΆλ¬μ§μ§ μμΌλ―λ‘ λ°λμ κ°λ λ΄μμ νΈμΆν΄μΌν©λλ€.
const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
// ...
})
λΌμ°νΈ λ³ κ°λ
beforeEnter
λ₯Ό λΌμ°νΈ κ°μ²΄μ μ§μ μ μνμ¬ ν΄λΉ λΌμ°νΈκ° λ°μνκΈ° μ΄μ μ μνλ λ‘μ§μ μ²λ¦¬ν μ μμ΅λλ€.
const router = new VueRouter({
routes: [
{
path: "/foo",
component: Foo,
beforeEnter: (to, from, next) => {
// ...
},
},
],
});
μ»΄ν¬λνΈ λ΄λΆ κ°λ
μ»΄ν¬λνΈ λ΄λΆμμ beforeRouteEnter
, beforeRouteUpdate
, beforeRouteLeave
μΈ κ°μ§λ‘ λ€λΉκ²μ΄μ
κ°λλ₯Ό μ€μ ν μ μμ΅λλ€. beforeRouteEnter
λ μμ§ μ»΄ν¬λνΈκ° λλλ§ λμ§ μμκΈ° λλ¬Έμ this
κ°μ²΄μ μ κ·Όν μ μμ§λ§ λλ¨Έμ§ λ κ°λ μ κ·Όμ΄ κ°λ₯ν©λλ€.
const Foo = {
template: `...`,
beforeRouteEnter(to, from, next) {
// ...
},
beforeRouteUpdate(to, from, next) {
// ...
},
beforeRouteLeave(to, from, next) {
// ...
},
};
νμ§λ§ next
ν¨μμ μ½λ°± ν¨μλ₯Ό μ§μ ν κ²½μ° μ½λ°±μ μ λ¬λ°λ μΈμλ‘ μ»΄ν¬λνΈ μΈμ€ν΄μ€μ μ κ·Όνμ¬ this
μ μ§μ μ κ·Όν μ μμ΅λλ€.
beforeRouteEnter (to, from, next) {
next(vm => {
// `vm`μ ν΅ν μ»΄ν¬λνΈ μΈμ€ν΄μ€ μ κ·Ό
})
}
π beforeEnterλ₯Ό ν΅ν λΌμ°νΈ λ³ κΆν 체ν¬
μ΄λ² ν¬μ€ν
μμλ λΌμ°νΈ κ°μ²΄ λ΄λΆμ λ€λΉκ²μ΄μ
κ°λλ₯Ό μ€μ νμ¬ μ¬μ©μ κΆνμ 체ν¬ν΄μ€¬μ΅λλ€.
λ§μ½ μ¬μ©μκ° μν κ²μκΈ μμ± νμ΄μ§μ λ‘κ·ΈμΈμ μν μνμμ μ κ·Όνμ¬κ³ νλ€λ©΄ alert
λ‘ μλμ λμμ€ λ€ ν νλ©΄μΌλ‘ 리λ€μ΄λ νΈ ν©λλ€.
routes/index.js
// import components
// ...
// import store for navigation gurad
import store from "../store/index";
export const router = new VueRouter({
routes: [
// ...
{
// μν κ²μκΈ μμ± νμ΄μ§
path: "/product/new",
component: ProductCreateView,
beforeEnter: (to, from, next) => {
// λ§μ½ λ‘κ·ΈμΈ μνλΌλ©΄
if (store.state.email !== "" && store.state.token !== "") {
return next();
}
alert("λ‘κ·ΈμΈμ΄ νμν μλΉμ€μ
λλ€.");
next("/");
},
},
],
});
π μ°Έκ³ μλ£
'π archive' μΉ΄ν κ³ λ¦¬μ λ€λ₯Έ κΈ
Vue.js ν΄λμ€μ μ€νμΌ λ°μΈλ© μ μ©νκΈ° (1) | 2021.03.02 |
---|---|
Vue.js μμ λ°μν(Reactivity)μ λ€λ£¨λ λ°©λ² (0) | 2021.03.02 |
Vue.jsμ Vuetify νμ©ν΄μ axiosλ‘ νμΌ μ λ‘λνκΈ° (0) | 2021.03.01 |
Vue.js μ€μ²© λΌμ°ν° (Nested Router) μ¬μ©νκΈ° (0) | 2021.03.01 |
Vue-Router history mode μ§μμ μν Django μ€μ (0) | 2021.03.01 |
π¬ λκΈ