VUE ???? ???? ?? ??? ??? ?????

? ????? Vue ??? ??? ?? ??? ??? ???? ?? ??, ?? ?? ? ?? ???? ?????. ? ??? ????? ?????.

?? ?? : ?? ??? ???? ?? ??? ???? ??? ?? ? ? ????. ??? URL? ???? ?? ???? ???? ??? ??? ?? ??? ???? ? ?? ?????. ?? ??, ??? ??? ???? ?? ??? ???? ID? ???? ?? ???? ?? ? ? ????. Colons ( : ? ???? ?? ???? ?? ????? ??? ?? ?? ?? ??? ?????. ?? ??:

 <code class="javascript">const routes = [ { path: '/blog/:id', name: 'BlogPost', component: BlogPost, props: true // Pass the route parameters as props to the component } ];</code>

? ??? :id ? ?? ???????. ???? /blog/123 ?? ???? BlogPost ?? ??? id: '123' ???? ?????. ?? ?? ? ??? ??? ????? ?? ??? ???? ???? ?? ? ? ????. ???? ?????? ??? ?? ?? ??? ?? ? ?? ????. ?? ??, path: '/product/:id([0-9] )' ?? ID?? ?? ? ?????.

?? ?? : ?? ??? ???? ?? ???? ???????? ?? ??? ?? ? ????. ??? ?? ???? ??? ?? ????? ???? ? ?? ?????. ?? ??? children ?? ??? ?? ??? ?????. ?? ??:

 <code class="javascript">const routes = [ { path: '/users', component: Users, children: [ { path: '', // Default child route, matches '/users' name: 'UserList', component: UserList }, { path: ':id', name: 'UserDetail', component: UserDetail } ] } ];</code>

/users (??? ??? ??) ? /users/:id (?? ???? ?? ?? ??? ?? ?)?? / /users ??? ?? ? ?? ??? ?????. ? ??? ??? ???? ?? ??? ??????.

Route Guards : Route Guards? ?? ?????? ?????? ?? ? ??? ?????. ??? ????? ?? ???? ??, ?? ?? ??? ??? ?? ??? ???? ? ??? ? ????. Vue Router? ?? ??? ???? ?????.

• beforeRouteEnter : ?? ?? ??? ???? ?? ?????. ?? ??? ????? ?? ???? ?? ?? ? ?????.
• beforeRouteUpdate : ?? ?? ??? ?? ?? ??? ??? ? ? ?????.
• beforeRouteLeave : ?? ?? ??? ?????? ?? ?????. ??? ???? ?? ??? ???? ? ?????.
• beforeEach (Global Guard) : ?? ??? ???? ??? ??.

????? beforeEach ??? ? :

 <code class="javascript">router.beforeEach((to, from, next) => { const requiresAuth = to.matched.some(record => record.meta.requiresAuth); const isAuthenticated = !!localStorage.getItem('token'); // Check for authentication token if (requiresAuth && !isAuthenticated) { next('/login'); // Redirect to login page } else { next(); // Proceed to the route } });</code>

??? ?? ?? ????? ?? ??

??? ?? ??? ????? ????? ??? ?? ? ??? ?????. ?? ??? ??? ????.

• ??? : ??? ? ?? ???? ?? ??? ??????. ?? ???? ?? ???? ??????.
• ?? ?? ?? : ?? ? ?? ??? ??? ?? ?? ??? ??????. ?? ???? ????? ??? ????.
• ?? ??? ? : ??? ??? ?? ?? ? ?? ??? ???? ???? ?????.
• ?? ? ?? : ??? ??? ???? ???????.
• ?? ?? : GIT? ?? ?? ?? ???? ???? ?? ??? ?? ??? ?????.
• ?? ? ?? : ??? ?? ???? ???? ?? Linters ? Formatter? ?????.

????? ?? ???? ???? ??? ? ????? ??? ?????.

?? ???? ??? ? ????? ??? ???? ??? ??????. ??, ?? ? ?? ????? ?? ??? ?????? ?? ??? ????? ?????. ?? ???? ???? ??? ??? ????.

• ?? : ?? ? ??? ?? ??? ??? ???? ?? ?? ???? ???? ??? ??? ??????.
• ?? : ??? ??? ???? ?? ??? ?? ??? ?? ???? ?????.
• ??? ?? ?? : ?? ??? ???? ?? ??? ????? ?? ??? ???? ?????.
• ?? ?? ?? : ?? ???? ???? ???? ?? ?? ????? ???? ???? ?? ????? ??? ?????.
• ???? : Route Guards? ???? ?? ?? ?? ?? ??? ?? ???? ??? ???? ???????.
• ?? ?? : ??? ?? ??? ???? ???? ?? ?? ??? ??? ?? ??? ?????.

vue.js ?????? ?? ? ?? ?? ??

? ????? ?? ? ?? ??? ???? ???? ?? ?????.

?? ?? ? :

 <code class="vue">// routes.js const routes = [ { path: '/product/:id', name: 'ProductDetail', component: ProductDetail } ]; // ProductDetail.vue <template> <div> <h1>Product {{ $route.params.id }}</h1> </div> </template></code>

? ??? id ?? ??? ???? ?? ?? ??? ???? ?? ??? ?????.

?? ?? ? :

 <code class="vue">// routes.js const routes = [ { path: '/admin', component: Admin, children: [ { path: 'users', component: AdminUsers }, { path: 'products', component: AdminProducts } ] } ];</code>

??? /admin ?? ?? ?? ??? ?????. /admin/users ???? AdminUsers ?? ??? ????? /admin/products AdminProducts ??????. ?? ??? ??? ??? ??????. $route ???? ?? ???? ??? ? ? ????. ?? ?? AdminUsers ? ??? this.$route.path /admin/users ???.

? ??? VUE ??? (?? ??, ?? ??, ?? ???)? ???? ?? ??? ??? ????? ?????????? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!