Как в VueJS при router-link передавать дополнительный параметр?

Question

у меня есть такой роутер линк, где я ссылаюсь на URL статьи

<router-link :to="'/post/' + article.url" class="navbar__link">

в apollo я фильтрую статью по $route.param.url, но хотелось бы фильтровать по ID статьи, но тогда придется менять ЧПУ на цифры айдишника, чего не хотелось бы, можно как то вместе с URL рядом передавать в параметрах ID статьи, что то типа

<router-link :to="'/post/' + article.url" :param="article.ID" class="navbar__link">

ну или любые другие варианты? главная цель это сохранить ЧПУ, просто при фильтре по URL, я получаю не 1 объект"статья", а массив "статей" где лежит 1 объект

Answer 1

Я сейчас в общем схему опишу, как я её вижу.

const router = new VueRouter({
  routes: [
    {
      name: 'component',
      path: '/route/:id',
      component: Component 
    }
  ]
});

// Тут как бы код компонента Component
export default {
  computed: {
    getData() {
      // Тут мы из стора забираем нужный параметр
      return this.$router.state.StateForThisComponent.data;
    }
  }
}

// Тут как бы стор vuex
export default {
  state: {
    data: 'some data'
  },
  mutations: {
    setData(state, data) {
      state.data = data;
    }
  }
}

// Тут компонет с роутер-линком. Я советую программно переходить. Не используя роутер-линк
<template>
  <a @click.prevent="goToURL"/>
</template>
<script>
  export default {
    data() {
      return {
        data: 'some data',
      }
    },
    methods: {
      goToURL() {
        // В этом методе мы триггерим переход. Вместо <router-link/>
        // Перед этим мы кладём стор
        // нужную нам инфу. Когда компонет, привязанный к роуту, откроется,
        // в сторе уже будет нужная инфа, которая из компьютед свойства
        // компонета будет помещена куда нужно. Так же можно на хук
        // beforeRouteEnter в компоненте роута эту логику поместить, но там есть
        // хитрости с доступом к this. В общем, схема такая.
        this.$store.commit('setData', data);
        this.$router.push({ name: 'component', params: { url: article.url } });
      }
    }
  }
</script>

БЛОГ НА HUSL

Как в VueJS при router-link передавать дополнительный параметр?

Ответы (1 шт):