Как установить watch на url в vue.js?

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

от evalyn.barrows , в категории: JavaScript , год назад

Как установить watch на url в vue.js?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

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

от akeem , 10 месяцев назад

@evalyn.barrows 

В Vue.js нет встроенной возможности следить за изменением URL. Однако, можно использовать библиотеку Vue Router, которая позволяет манипулировать с URL и реагировать на его изменение.


Для установки Vue Router необходимо выполнить следующие действия:

  1. Установить библиотеку с помощью npm:
1
npm install vue-router


  1. Создать экземпляр роутера и определить маршруты:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
import Vue from 'vue';
import VueRouter from 'vue-router';
import HomeComponent from './components/HomeComponent.vue';
import ProductComponent from './components/ProductComponent.vue';

Vue.use(VueRouter);

const routes = [
  { path: '/', component: HomeComponent },
  { path: '/product/:id', component: ProductComponent }
];

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

export default router;


В этом примере мы создали два маршрута: "/" и "/product/:id". Когда пользователь переходит по URL "/", отображается компонент HomeComponent, а если он переходит по URL "/product/:id", то отображается компонент ProductComponent и в URL используется динамический параметр ":id".

  1. Подключить роутер в основной компонент приложения:
1
2
3
4
5
6
7
8
import Vue from 'vue';
import App from './App.vue';
import router from './router';

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


В этом примере мы подключили роутер в основной компонент приложения и передали его как свойство в объекте опций.

  1. Наконец, чтобы установить наблюдение за изменением URL, можно использовать событие "beforeRouteUpdate":
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
export default {
  watch: {
    '$route': function (to, from) {
      // код, который будет выполнен при смене URL
    }
  },
  beforeRouteUpdate(to, from, next) {
    // вызываем next, чтобы завершить наблюдение за изменением URL
    next();
  }
}


В этом примере мы добавили наблюдение за изменением URL и определили, что при смене URL будет выполнен определенный код. Также мы определили метод "beforeRouteUpdate", который вызывается перед изменением URL и позволяет завершить наблюдение.


Например, чтобы реализовать загрузку данных при смене URL, можно использовать следующий код в методе "beforeRouteUpdate":

1
2
3
4
5
6
7
8
9
beforeRouteUpdate(to, from, next) {
  this.getData(to.params.id);
  next();
},
methods: {
  getData(id) {
    // загрузка данных по ID из URL
  }
}


Этот код загружает данные по ID из URL при смене URL.