Могу ли я продлить маршрутизатор-связь?

Можно ли с помощью Vue.JS расширить router-link или привязать к нему событие, чтобы для определенного типа ссылки выполнялось другое действие?

Что я хотел бы сделать, так это указать некоторые ссылки в моем приложении для всплывающих вкладок, а другие - нет; например

<router-link>no tab</router-link>
<router-link-tab>router view is updated and a tab is pushed</router-link-tab>

Я хотел бы избежать привязки события к beforeRoute и проверки URL-адресов маршрута, но понимаю, что это может быть единственным путем вперед.

Это должно работать во всем приложении Vue, как это делает router-link, и не будет содержаться только в одном компоненте.

Я иду в этом назад? Будут ли подводные камни в определении пользовательского компонента, который запускает новую вкладку и вызывает router.push, как здесь? Использование RouterLink только для выделения активных и т. д.?

Vue.component('router-link-tab', {
  template: `<router-link :to="to" @click.prevent="click">
               <slot></slot>
             </router-link>
  `,
  props: {
    to: [String, Object],
  },
  methods:{
    click: function () {
        console.log(this.to);
        this.$router.push(to);
    }
  }
});

vue.js vuejs2
person Kurucu    schedule 20.02.2018    source источник
comment
Возможный дубликат Добавить прослушиватель событий в ‹ компонент router-link› с использованием директивы v-on: — VueJS   -  person stdob--    schedule 21.02.2018
comment
Похоже, но я не думаю, что это то же самое. Где будет определен встроенный обработчик событий? Мои маршрутизаторы-ссылки не все в одном компоненте.   -  person Kurucu    schedule 21.02.2018
comment
@stdob - вторая причина, по которой это не дубликат, заключается в том, что в предыдущем вопросе рассматривается одно или несколько применений добавления прослушивателя событий. Я бы хотел, чтобы это было глобальным; быть определены один раз для всех применений.   -  person Kurucu    schedule 23.02.2018

Ответы (1)


arrow_upward
2
arrow_downward

Вы можете использовать пользовательский компонент:

Vue.component('router-link-tab', {
  template: `<router-link :to="to" event="" @click.native.prevent="click">
               <slot></slot>
             </router-link>
  `,
  props: {
    to: String,
  },
  methods:{
    click: function () {
        console.log(this.to)
    }
  }
});

[ https://jsfiddle.net/6dn8f1nw/ ]

person stdob--    schedule 20.02.2018
comment
У меня это не работает в песочнице (по крайней мере, в Safari). Событие click прослушивается только компонентом router-link-tab, а не router-link; поэтому /tab никогда не посещается (хотя журнал консоли кликов действительно срабатывает). - person Kurucu; 23.02.2018