Как использовать vue-router в локальном файле?

Чтобы использовать vue-router в локальном файле, вам необходимо выполнить следующие шаги:

1. Установка зависимостей:
- Установите Vue.js, если у вас еще нет его установленного. Для этого вы можете использовать команду npm install vue в терминале вашего проекта.
- Установите vue-router. Для этого выполните команду npm install vue-router или yarn add vue-router.

2. Создание и настройка маршрутизации:
- Создайте файл router.js или любой другой файл для хранения настроек маршрутизации.
- Внутри файла router.js импортируйте необходимые модули, включая Vue и VueRouter:

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

     Vue.use(VueRouter);

- Определите массив с настройками маршрутизации, содержащий объекты с двумя свойствами: path и component. path - это путь в адресной строке браузера, а component - это компонент Vue, который будет отображаться при этом пути. Например:

     const routes = [
       { path: '/', component: Home },
       { path: '/about', component: About },
       // ...
     ];

Здесь Home и About - это компоненты Vue, которые должны быть созданы в вашем проекте.
- Создайте экземпляр объекта маршрутизатора, передав в него массив с настройками маршрутизации:

     const router = new VueRouter({
       routes,
     });

- Экспортируйте созданный объект маршрутизатора, чтобы его можно было импортировать в других файлах:

     export default router;

3. Подключение и использование маршрутизации в главном компоненте:
- Вам нужно импортировать созданный объект маршрутизатора и подключить его к экземпляру Vue:

     import router from './router.js';
     
     new Vue({
       router,
       // ...
     }).$mount('#app');

- Для отображения компонентов при изменении пути в адресной строке вы можете использовать компонент <router-view> внутри вашего главного компонента:

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

Компонент <router-view> будет автоматически обновляться, когда происходит навигация по маршрутам.

4. Создание компонентов для каждого маршрута:
- Вам нужно создать компоненты, соответствующие каждому маршруту, указанному в настройках маршрутизации.
- Каждый компонент должен иметь свой уникальный путь, который будет совпадать с одним из путей, определенных в объектах настроек маршрутизации.
- Например, для пути '/' вы можете создать компонент с именем Home:

     // Home.vue
     <template>
       <div>
         <h1>Home Page</h1>
       </div>
     </template>

     <script>
     export default {
       // ...
     };
     </script>

Теперь, при запуске вашего проекта, вы сможете использовать vue-router в локальном файле, чтобы управлять путями и отображать соответствующие компоненты Vue при навигации по адресам вашего приложения.