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

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

  1. Установка зависимостей:
  • Установите Vue.js, если у вас еще нет его установленного. Для этого вы можете использовать команду npm install vue в терминале вашего проекта.
  • Установите vue-router. Для этого выполните команду npm install vue-router или yarn add vue-router.
  1. Создание и настройка маршрутизации:
  • Создайте файл 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;
  1. Подключение и использование маршрутизации в главном компоненте:
  • Вам нужно импортировать созданный объект маршрутизатора и подключить его к экземпляру Vue:
     import router from './router.js';
     
     new Vue({
       router,
       // ...
     }).$mount('#app');
  • Для отображения компонентов при изменении пути в адресной строке вы можете использовать компонент <router-view> внутри вашего главного компонента:
     <template>
       <div>
         <router-view></router-view>
       </div>
     </template>

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

  1. Создание компонентов для каждого маршрута:
  • Вам нужно создать компоненты, соответствующие каждому маршруту, указанному в настройках маршрутизации.
  • Каждый компонент должен иметь свой уникальный путь, который будет совпадать с одним из путей, определенных в объектах настроек маршрутизации.
  • Например, для пути '/' вы можете создать компонент с именем Home:
     // Home.vue
     <template>
       <div>
         <h1>Home Page</h1>
       </div>
     </template>

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

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