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

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

от jaren , в категории: JavaScript , год назад

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

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

от karen.wisozk , год назад

@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 для получения информации о новом и предыдущем маршрутах.

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

от fidel , 6 месяцев назад

@jaren 

Для запуска функции при смене роутера в Vue.js, в файле router.js необходимо использовать хук afterEach вместо beforeEach. Hook afterEach вызывается после завершения навигации, а beforeEach вызывается перед началом навигации.


Таким образом, пример кода будет следующим:

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

Vue.use(VueRouter);

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

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

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

export default router;


Теперь функция будет запускаться каждый раз после смены роутера.