В Vue.js используется Vue Router — популярная библиотека для управления маршрутизацией в одностраничных приложениях. Иногда вам может потребоваться получить имя текущего маршрута в ваших компонентах Vue для различных целей, таких как условный рендеринг или динамическая логика. В этой статье мы рассмотрим несколько методов получения текущего имени маршрута в Vue.js, а также примеры кода.

Метод 1: использование объекта $route
Vue Router предоставляет объект $route, который содержит информацию о текущем маршруте. Чтобы получить доступ к имени маршрута, вы можете просто использовать $route.name. Вот пример:

<template>
  <div>
    <p>Current route name: {{ $route.name }}</p>
  </div>
</template>

Метод 2: использование свойства $router.currentRoute
Объект $routerв Vue Router предоставляет свойство currentRoute, которое предоставляет доступ к текущему объекту маршрута.. Вы можете получить имя маршрута, используя currentRoute.name. Вот пример:

<template>
  <div>
    <p>Current route name: {{ $router.currentRoute.name }}</p>
  </div>
</template>

Метод 3: использование вычисляемого свойства
Вы также можете создать вычисляемое свойство для динамического получения имени текущего маршрута. Этот подход позволяет при необходимости выполнять дополнительную логику или преобразования. Вот пример:

<template>
  <div>
    <p>Current route name: {{ currentRouteName }}</p>
  </div>
</template>
<script>
export default {
  computed: {
    currentRouteName() {
      return this.$route.name;
    },
  },
};
</script>

Метод 4: использование защиты навигации маршрутизатора.
Vue Router предоставляет средства защиты навигации, которые позволяют перехватывать и обрабатывать навигацию по маршруту. Охранник beforeEachможно использовать для обновления свойства данных с использованием текущего имени маршрута. Вот пример:

<template>
  <div>
    <p>Current route name: {{ currentRouteName }}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      currentRouteName: '',
    };
  },
  created() {
    this.$router.beforeEach((to, from, next) => {
      this.currentRouteName = to.name;
      next();
    });
  },
};
</script>

В этой статье мы рассмотрели несколько методов получения текущего имени маршрута в Vue.js. Предпочитаете ли вы использовать объект $route, свойство $router.currentRoute, вычисляемое свойство или средство защиты навигации маршрутизатора, у вас есть несколько вариантов выбора в зависимости от ваших предпочтений. особые требования. Используя эти методы, вы можете улучшить функциональность и интерактивность своих приложений Vue.js.

Не забудьте выбрать метод, который лучше всего подходит для вашего проекта, и наслаждайтесь созданием потрясающих приложений Vue.js с динамической обработкой маршрутов!