С появлением веб-приложений пришла потребность в смене URL-адресов с помощью JS. На помощь пришел History API браузера.

Благодаря этому все основные современные фреймворки позволяют программно управлять маршрутизацией с синхронизацией URL-адреса с представлением приложения.

Для маршрутизации во Vue-приложениях можно создать свою собственную интеграцию с History API, но лучше использовать официальную библиотеку от Vue — Vue-Router.

Подборка инструментов для быстрой разработки приложений на Vue.js

tproger.ru

Базовые вещи

Использование можно начать хоть с установки с CDN:

<script src="https://unpkg.com/vue-router"></script>

Но мы начнем сразу с «правильного» варианта — с Vue Cli:

yarn global add @vue/cli

## ИЛИ

npm i -g @vue/cli

Создадим проект с помощью VUE CLI с базовым шаблоном — Default ([Vue 2] babel, eslint):

vue create vue-router-test-app

Минимальная конфигурация

Добавим роутер:

yarn add vue-router

## или

npm i --save vue-router

Добавим в Main.js минимальную конфигурацию для роутера:

/src/main.js

import Vue from "vue";
import App from "@/App.vue";
import VueRouter from "vue-router";
import HelloWorld from "@/components/HelloWorld";

Vue.use(VueRouter);

const routes = [
  {
    path: "",
    component: HelloWorld,
  },
];

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

Vue.config.productionTip = false;

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

Роуты представляют собой массив, каждый элемент которого — объект, где требуется указать path и component.

Хакатон DemHack

12–13 сентября, Москва, беcплатно

tproger.ru

События и курсы на tproger.ru

Чтобы увидеть изменения надо вывести компонент роутера — routerView, который отвечает за отображение. Для этого изменим App.vue:

/src/App.vue

<template>
  <div id="app">
    <router-view /> 
  </div>
</template>

Теперь, зайдем на http://localhost:8080/. Увидим страницу с маршрутом «/», где отображается компонент HelloWorld.vue, вместо тега router-view, который мы писали в App.vue.

Иерархия путей

Добавим маршрут в main.js (массив routes):

const routes = [
  {
    path: "",
    component: HelloWorld,
  },
  {
    path: "/board",
    component: {
      render: (h) => h("div", ["Board Page"]),
    },
  },
];

Зайдем по адресу http://localhost:8080/board. Увидим вторую страницу с отображением рендер-функции.

Параметры (Props) маршрута

Поправим дочерний маршрут для маршрута /board в main.js. Для дочерних компонентов надо указывать где в родительском компоненте отображать дочерние — компонентом router-view. В нашем случае — это в рендер-функция:

import Board from "@/components/Board";
const routes = [
  {
    path: "",
    component: HelloWorld,
  },
  {
    path: "/board",
    component: {
      render: (h) => h("div", ["Board Page", h("router-view")]),
    },
    children: [
      {
        path: '/board/:id',
        component: Board,
      }
    ]
  },
];

Напомню, что рендер-функция в template-представлении будет выглядеть следующим образом:

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

Создадим компонент Board.vue с содержимым:

/src/components/Board.vue

<template>
  <div>Board with prop id: {{ id }}</div>
</template>

<script>
export default {
  computed: {
    id() {
      return this.$route.params.id;
    },
  },
};
</script>

Перейдем по адресу http://localhost:8080/board/21 и увидим родительский и дочерний компоненты Board с передачей параметра id равным 21.

Параметры маршрута доступны в компоненте по this.$route.params.

Если хотим более явно отобразить зависимость компонента от входных параметров, используем настройку props: true при настройке маршрута:

/src/main.js

children: [
  {
    path: '/board/:id',
    component: Board,
    props: true,
  }
]

А в компоненте Board.vue принять id как входной параметр компонента:

/src/components/Board.vue

<template>
  <div>Board with prop id: {{ id }}</div>
</template>

<script>
export default {
  props: {
    id: {
      type: String,
      default: null,
    },
  },
};
</script>

#статьи #веб-разработка #фронтенд #vue