使用 vue- <router-link> 更改路线

Question

我有一个 <router-link to = "/ endreco / test">，但我需要在 vue-material 选项卡上执行相同的行为，如下所示：<md-tab md- icon = "books"> .. 更改我的路线，相同作为 href = ""

我该怎么办？

我正在使用 vue.js，vue-router 通过 vue-material

控制路由和样式

Answer 1

您可以添加一个 @click.native 处理程序以手动推送到路由（.native modifier is needed since the md-tab component 没有 click 事件）：

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

Here's the documentation on Programmatic Navigation with Vue Router.

Answer 2

看我的代码，我实现了一个方法，遍历到router，查看提到的组件名称的路由，你很容易明白！

<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>

希望能有所收获！

使用 vue- <router-link> 更改路线

Change route with vue- <router-link>

javascript

vue.js

vue-router

vuejs2