Чтобы запустить приложение со вложенного vue-router роута в JavaScript, необходимо выполнить следующие шаги:
1. Установка Vue и Vue Router:
Выполните команду npm install vue vue-router в командной строке, чтобы установить Vue и Vue Router локально в вашем проекте.
2. Создайте основной компонент Vue:
Создайте новый файл, например, App.vue, и определите в нем основной компонент Vue. В этом компоненте будет размещаться точка входа для вашего приложения. Пример базового шаблона:
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App',
}
</script>
В этом примере используется <router-view>, который будет представлять место для отображения вложенных роутов.
3. Создайте вложенные компоненты:
Создайте отдельные компоненты Vue для каждого вложенного роута, которые вы хотите использовать в вашем приложении. Назовите их, например, Home.vue, About.vue и так далее. Пример:
<template>
<div>
<h1>{{ title }}</h1>
</div>
</template>
<script>
export default {
name: 'Home',
data() {
return {
title: 'Главная страница',
}
},
}
</script>
Важно убедиться, что каждый вложенный компонент имеет уникальное имя и содержит необходимые данные и функции для своего функционирования.
4. Определите маршруты в Vue Router:
В файле main.js или в другом файле, где вы инициализируете ваше приложение Vue, добавьте следующий код для настройки маршрутизации с использованием Vue Router:
import Vue from 'vue';
import VueRouter from 'vue-router';
import App from './App.vue';
import Home from './Home.vue';
import About from './About.vue';
Vue.use(VueRouter);
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About },
];
const router = new VueRouter({
routes,
});
new Vue({
router,
render: (h) => h(App),
}).$mount('#app');
В этом примере мы импортируем Vue, VueRouter и компоненты App, Home и About. Затем мы определяем массив routes, который содержит объекты путей и компонентов, соответствующих им. Затем мы создаем экземпляр VueRouter, передавая в него массив routes. Затем мы создаем экземпляр Vue, связываем его с роутером и передаем компонент App для отображения в <router-view>. Наконец, мы указываем точку монтирования ($mount('#app')), которая соответствует элементу с id="app" в HTML-разметке вашей страницы.
5. Добавьте маршрутные ссылки:
Добавьте маршрутные ссылки в ваш компонент App.vue, чтобы пользователь мог навигироваться между вложенными роутами. Пример:
<template>
<div id="app">
<router-link to="/">Главная</router-link>
<router-link to="/about">О нас</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App',
}
</script>
Здесь мы использовали компонент <router-link>, чтобы создать ссылки на наши вложенные роуты. Атрибут to указывает на путь роута, который он будет обрабатывать.
6. Запустите приложение:
Теперь ваше приложение с вложенными роутами готово к запуску. Выполните команду npm run serve в командной строке, чтобы запустить локальный сервер разработки и открыть приложение в браузере по адресу http://localhost:8080 (порт может отличаться). Вы должны увидеть вашу главную страницу и ссылки для навигации между вложенными роутами.
Нажимайте на ссылки, чтобы отобразить соответствующие страницы, определенные в ваших вложенных компонентах.
Это основной процесс для запуска приложения с вложенного vue-router роута в JavaScript с использованием фреймворка Vue и библиотеки Vue Router.