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

Posted 2023-02-22

【中文标题】使用 vue- <router-link> 更改路由

【英文标题】：Change route with vue- <router-link>

【发布时间】：2018-02-17 18:15:10

【问题描述】：

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

我该怎么办？

我正在使用 vue.js，vue-router 通过 vue-material 控制路由和样式

【参考方案1】：

您可以添加@click.native 处理程序以手动推送到路由（需要.native modifier，因为md-tab component 没有click 事件）：

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

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

【讨论】：

我是这样输入的，可惜没用。我在一个按钮上运行了测试，它运行良好： test button> 在浏览器中用一个按钮呈现

@RafaelAlves，对不起，我错过了...您需要添加 .native 修饰符。查看我的编辑

现在已弃用

【参考方案2】：

看我的代码我已经实现了一个遍历路由的方法来查看提到的组件名称的路由，你可以很容易地得到想法！

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

希望从中得到一些足智多谋的东西！