Vue? ??? ?????? ???? ??? ??? ???? ?? ?? ??? ?? ????????. Vue ???? Vue ?????? ??? ???? ?? ??? ???????? URL? ???? ??? ?? ???? ??? ? ????. ? ?? ?? ??? Vue ???? ???? ??? ??? ???? ???? ?? ?? ????. ? ????? Vue ???? ???? ? ??? ???? ??? ?????.

?? Vue ???? ???? ???. npm ??? ???? ??? ? ????:

npm install vue-router

??? ??? ? Vue ????(????? main.js)? ?? ???? Vue ??? ? ?? ?? ??? ??? ? ????.

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

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

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

const routes = [
  {
    path: '/home',
    component: () => import('@/components/Home.vue'),
  },
  {
    path: '/about',
    component: () => import('@/components/About.vue'),
  },
  {
    path: '/contact',
    component: () => import('@/components/Contact.vue'),
  },
];

const router = new VueRouter({
  routes,
  mode: 'history',
});

export default router;

?? ? ????? ?? Home ?? ??? ???? /home, /about ? /contact?? ? ?? ??? ??????. vue, About.vue ? Contact.vue. ???? Vue ????? ???? ???? ???.

import Vue from 'vue';
import App from './App.vue';
import router from './router/index';

new Vue({
  router,
  render: h => h(App),
}).$mount('#app');

? ????? ??? ????? Vue ????? ???? ??? ???? App.vue ?? ??? ??????.

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

??????? ??? ???? ??? ???? ????? ??? ? ????. ?? URL? ??? ???? ??? ?? ??? ?????. ?? ??? ????.

<template>
  <div>
    <h1>My App</h1>

    <router-link to="/home">Home</router-link>
    <router-link to="/about">About</router-link>
    <router-link to="/contact">Contact</router-link>

    <router-view></router-view>
  </div>
</template>

? ????? ??? ???? ? ??? ??? ???? ?? ??? ????. ??? ???? URL? ??? ???? ??? ?? ????? ??????.

?? ?? ??? $route ??? ???? ?? URL? ??? ???? ?? ??? ?? ? ???? ??? ?? ????. ?? ??? ????.

<template>
  <div>
    <h1 v-if="$route.path === '/home'">Home</h1>
    <h1 v-if="$route.path === '/about'">About</h1>
    <h1 v-if="$route.path === '/contact'">Contact</h1>
  </div>
</template>

? ????? v-if ???? ???? ?? URL? ??? ???? ??

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

?? ?? ??? ?? Vue ???? ???? ??? ??? ???? ???? ??? ??? ??? ? ????. URL? ??? ?????? ?? ??? ??? ???? ??? ? ??? ?? URL? ??? ???? ?? ??? ?? ? ???? ??? ? ????. ?? ??? ????? ?????? ???? ? ?? ? ???? ?????.

? ??? Vue?? ???? ???? ??? ??? ???? ???? ??? ??? ??????? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!