Изменить маршрут с помощью vue- <router-link>

Question

Изменить маршрут с помощью vue- <router-link>

1

У меня есть <router-link to = "/endreco/test">, но мне нужно выполнить такое же поведение на вкладке vue-material, что-то вроде этого: <md-tab md- icon = "books">.. изменить мой маршрут, так же как href= ""

Что я должен делать?

Я использую vue.js, vue-router для управления маршрутами и стилем с помощью vue-material

Rafael Alves 08 сен. 2017, в 21:28

Источник

Теги:

javascript

vue.js

vue-router

vuejs2

2 ответа

1

Вы можете добавить обработчик @click.native чтобы нажимать на маршрут вручную ( .native модификатор .native , поскольку компонент md-tab не имеет события click):

<md-tab @click.native="$router.push('/endreco/test')">

Здесь представлена документация по программной навигации с Vue Router.

thanksd 08 сен. 2017, в 15:58

0

Я ввел таким образом <md-tab @click = "$ router.push ('/ endreco / test')">, к сожалению, это не сработало. Я запустил тест для кнопки, и он отлично работал: <button @ click = "$ router.push ('/ endreco / test')"> test </ button> <Md-tab> отображается с помощью кнопки в браузере
Rafael Alves 08 сен. 2017, в 19:53
0

@RafaelAlves, извините, я пропустил это ... Вам нужно добавить модификатор .native . Смотри мое редактирование
thanksd 21 май 2018, в 17:27

Ещё вопросы

Я ввел таким образом <md-tab @click = "$ router.push ('/ endreco / test')">, к сожалению, это не сработало. Я запустил тест для кнопки, и он отлично работал: <button @ click = "$ router.push ('/ endreco / test')"> test </ button> <Md-tab> отображается с помощью кнопки в браузере
@RafaelAlves, извините, я пропустил это ... Вам нужно добавить модификатор .native . Смотри мое редактирование

Meet Zaveri · Accepted Answer · 2017-09-08T23-22-00.000Z

См. Мой код. Я реализовал метод, который пересекает маршрутизатор, чтобы увидеть маршруты указанного имени компонента, вы можете легко получить представление!

<template>
  <div>
    <div class="mdl-grid">
      <div class="mdl-cell mdl-cell--3-col mdl-cell mdl-cell--1-col-tablet mdl-cell--hide-phone"></div>
      <div class="mdl-cell mdl-cell--6-col mdl-cell--4-col-phone">
        <div class="image-card" v-for="picture in this.pictures" @click="displaydetails(picture.id) ">
          <div class="image-card__picture">
            <img :src="picture.url" />
          </div>
          <div class="image-card__comment mdl-card__actions">
            <span>{{ picture.comment }}</span>
          </div>
        </div>
      </div>
    </div>
    <router-link class="add-picture-button mdl-button mdl-js-button mdl-button--fab mdl-button--colored" to="/postview">
      <i class="material-icons">add</i>
    </router-link>
  </div>
</template>
<script>
import data from '../data'
export default {
 data() {
     return{
         'pictures' : data.pictures 
     }
 },
 methods :{
     displaydetails (id){
         this.$router.push({name:'detailview', params:{id:id}});
         console.log("helo");
     }
 }
}
</script>

Надежда получить что-то изобретательное из этого!