Как запустить функцию при смене роутера на vue.js?

Пользователь

от jaren , в категории: JavaScript , 2 месяца назад

Как запустить функцию при смене роутера на vue.js?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от karen.wisozk , 2 месяца назад

@jaren 

В Vue.js можно запустить функцию при смене роутера, используя хук beforeEach из пакета vue-router.


Вам сначала нужно установить пакет vue-router с помощью npm:

1
npm install vue-router


Затем, в вашем приложении Vue.js, создайте файл router.js и определите маршруты для вашего приложения:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

const routes = [
  // Ваши маршруты
];

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

export default router;


Затем, в основном файле вашего приложения (например, main.js), импортируйте router.js и используйте его в качестве параметра для Vue:

1
2
3
4
5
6
7
8
import Vue from 'vue';
import App from './App.vue';
import router from './router';

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


Теперь, в router.js, вы можете использовать хук beforeEach для запуска функции при смене роутера:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
const router = new VueRouter({
  routes,
});

router.beforeEach((to, from, next) => {
  // Ваш код для выполнения функции при смене роутера
  next();
});

export default router;


В этом примере функция будет вызываться каждый раз при изменении роутера. Вы можете использовать параметры to и from для получения информации о новом и предыдущем маршрутах.