Vue路由<router-link>属性的使用

Posted 2023-03-22

参考技术A <router-link> 组件支持用户在具有路由功能的应用中 (点击) 导航。 通过 to 属性指定目标地址，默认渲染成带有正确链接的 <a> 标签，可以通过配置 tag 属性生成别的标签.。另外，当目标路由成功激活时，链接元素自动设置一个表示激活的 CSS 类名。

以下两种实现方式得到的效果一样

一、

 <a href="#/login">登陆</a>

<a href="#/register">注册</a> 

二、

<router-link to="/login">登陆</router-link>

 <router-link to="/register">注册</router-link>

<router-link>默认渲染为一个<a>标签

假如我们想把<router-link>渲染成其他标签，可修改其属性tag，如：

<router-link to="/login" tag=“span”>登陆</router-link>

 <router-link to="/register">注册</router-link>

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

【中文标题】使用 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>

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