vue.js (? : Vue ???)? ?? ??? ???? ??????

??? ????? ????? ???? JavaScript ??? ?? ? Vue.js? ?? ??? ?? ???? (SPA) ??? ?????? ?????? ? ?? ??? ???? ?????. ?? ?? ???? ????? ???? ??? ???? Vue ??? ???. Vue Router? vue.js? ???? ???? ???? ?? ? ??? ???? ??? ??? ???? ??? ????????.

Vue ??? ??? Vue.js? ??? ??? ?? ??? ???? ????.

1. Page.js : Express ????? ??? ?? ?? ????? ? ???. vue.js? ?? ??? ? ??? Vue ???? ?? ? ?? ?? ??? ?????.
2. Director.js : vue.js? ?? ? ??? ? ?? ?? ??? ????? ???? ?? ????? ?????.
3. Vue-Router-Native : Vue Native ??? ??? ??? ??? ????? Vue.js? ???? ?? ??? ??????? ???? ? ?????.
4. Vue-Router-Middleware : ???? ???? Vue ???? ?????? ??? ??? ??? ???? ?????.

??? ??? ????? VUE ???? VUE ??? ? ???? ???? ??? ???? ?? Vue.js ??????? ?? ?? ?? ??? ??? ???? ?? ????.

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

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

1. Vue ??? ?? :
   ?? NPM ?? ??? ???? Vue ???? ???????. ???? ?????? ?? ??? ??????.

    <code class="bash">npm install vue-router # or yarn add vue-router</code>

2. ??? ???? ?? :
   src ?????? router.js ?? ? ??? ????. ? ???? ??? ????? ?????.

    <code class="javascript">import { createRouter, createWebHistory } from 'vue-router' import Home from './views/Home.vue' import About from './views/About.vue' const routes = [ { path: '/', name: 'Home', component: Home }, { path: '/about', name: 'About', component: About } ] const router = createRouter({ history: createWebHistory(), routes }) export default router</code>

3. ??? ?? VUE ?? ???? :
   ?? ?? ???? ?? (????? main.js )?? ???? ???? ?????.

    <code class="javascript">import { createApp } from 'vue' import App from './App.vue' import router from './router' const app = createApp(App) app.use(router) app.mount('#app')</code>

4. ??? ?? ??? ?? :
   App.vue ?? ?? ?? ???? ???? <router-link></router-link> ???? <router-view></router-view> ???? ?? ??? ?? ??? ???????.

    <code class="html"><template> <div id="app"> <nav> <router-link to="/">Home</router-link> | <router-link to="/about">About</router-link> </nav> <router-view></router-view> </div> </template></code>

5. ?? ?? ?? :
   ??? ?? ?? ??, ?? ??? ? ?? ?? ??? ???? Vue ???? ??? ?? ? ? ????.

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

Vue Router? vue.js? ?? ??? ???? ?? ? ?? ??? ???? ?? ????? ???? ?????.

1. vue.js?? ??? ?? :
   Vue Router? Vue.js? ???? ????? ??? ???? ???? ?? ? ??? ?????. VUE? ??? ???? ???? ?? ? ???????? ?? ???? ? ? ??????.
2. ??? ?? ?? :
   Vue Router?? ?? ??, ??, ????? ?? ??, ?? ??? ? ?????? ??? ??? ? ?? ??? ?????. ??? ??? ?????? ??? ?? ????? ?????.
3. ?? ?? ? ?? :
   vue.js? ?? ??? ????? Vue Router? ? ????? ??? ????? ?????. ?? ?? ???? ?? ??? ? ???? ??? ??? ? ? ????.
4. ?? ?? ? ?? :
   Vue Router? ??? ??? ??? ?? ? ??? ?? ?? ? ??? ?????. ??? ?? ??? ??? ?? ??? ????.
5. ?? ??? :
   Vue ???? ?? ?? ??? ?????? ???? ?? ????? ?? ?? ??? ?? ???? ? ????. ?? ??? ??? ???? ????? ????? ???? ??? ?????.
6. ?? ?? ? ??? :
   Vue.js?? ?? ???? ??? ??? ? Vue Router? ? ????? ??? ???? ? ?? ???? ???? ????. ?? ?? ???? ??? ?? ???? ?? ?? ?? ??? ?? ? ? ????.

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

Vue.js?? ???? ??? ?? ???? ???? ?? ????? ???? ?? ?? ??? ???? ??? ?? ??????.

?? ?? :

1. ?? ? ?? ?? :
   ?? ? ??? ???? ?? ?????? ????? ?? ?????? ?? ? ? ????. ?? ?? ?? ?? ?? ??? ???? ?????? ??????.
2. ??? ?? ?? :
   ?? ?? ??? ??? ??? ???? ??????? ???? ??? ??????. ?? ???? ?? ?? ??? ???? ?? ? ? ????.
3. ?? ??? ?? :
   Route Guards? ??? ?? ?? ?? ??? ?? ?? ???? ???? ??? ?????. ??? ????? ??? ???? ??? ????? ? ??????.
4. ????? ?? ?? :
   ?? ????? ?? ??? ??? ???? ???? ??? ???????. ??? ??? ???? ???? ?? ?? ?? ??? ?? ??? ??????.
5. ??? ?? ?? :
   ??? ?? ? ? ??? ??? ??? ???? ?? ??? ??? ??????. Vue Router? ??? ??? ???? ??? ?????.

???? ?? :

1. ?? ?? ?? :
   ???? ??? ?? ??? ???? ????. ??? ?? ?? ??? ???? ?? ??? ???? ????? ??????.
2. ?? ?? ?? ?? :
   ?? ?? ??? ???? ???????. ????? ??? ?? ?????? ??? ??? ?? ???? ??? ? ????.
3. ?? ??? ???? ? :
   ?? ?????? ?? ??? ?? ??? ??????. ???? 404 ?? ?? ? ?? ?? ??? ???? ???? ?? ?????.
4. ??? ??? ?????? ?? ?? ????? .
   ?? ??? ??? ?? ??? ?? ??? ??? ?? ?? ?? <router-link></router-link> ?? ??? ?????????.
5. ??? ?? ??? :
   ?? ???? ??????? ???? ???? ?? ??? ??? ????? ??? ??? ? ????. ???? ???? ???? ???? ?? ???? ??????.

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

? ??? vue.js (? : Vue ???)? ?? ??? ???? ??????? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!