router-link 与 vue 和 vuetify 混淆答案

【问题标题】：router-link with vue and vuetify confusionrouter-link 与 vue 和 vuetify 混淆
【发布时间】：2018-05-15 02:58:40
【问题描述】：

如何在使用预定义模板的情况下使用 vue-router：

https://vuetifyjs.com/examples/layouts/google-contacts

我在我的 items 对象中添加了一个链接

 items: 
[{ icon: 'dashboard' text: 'Home', link: '/'},

{ icon: 'dashboard' text: 'Account', link: '/account'},

我很困惑将路由器链接组件放在哪里。

【问题讨论】：

标签： vue-router vuetify.js

【解决方案1】：

v-list-tile、v-btn 和 v-card 都扩展了 router-link，因此您可以直接在这些组件上使用任何 router-link 属性。

在您的情况下，您可以使用<v-list-tile :to="item.link">

【讨论】：

我们在哪里可以找到这方面的文档？
它似乎不适用于 params 对象，我有什么遗漏吗？ <v-list-tile @click="" :to="{path: '/settings', params: {jumpTo: 'verification'}}"> 在this.$route.params 上给出空对象
我发现它实际上不适用于path，仅适用于name iirc

【解决方案2】：

我遇到了同样的问题，我是这样解决的：

<v-list-item v-else :key="item.text" link>
<!-- to -->
<v-list-item v-else :key="item.text" :to="item.link" link>


<v-list-item v-for="(child, i) in item.children" :key="i" link>
<!-- to -->
<v-list-item v-for="(child, i) in item.children" :key="i" :to="child.link" link>


JS

{ icon: "mdi-history", text: "Recientes", link: "/" },

不要忘记将<router-view /> 放入容器中。

    <v-content>
      <v-container class="fill-height" fluid>
        <router-view />
      </v-container>
    </v-content>

【讨论】：

谢谢。我知道有一种简单的方法可以做到这一点。

【解决方案3】：

一个例子：

<template>
  <v-navigation-drawer
    app
    clipped
    permanent
    expand-on-hover
  >
    <v-list>
      <v-list-item class="px-2">
        <v-list-item-avatar>
          <v-img src="https://randomuser.me/api/portraits/women/85.jpg"></v-img>
        </v-list-item-avatar>
      </v-list-item>

      <v-list-item link>
        <v-list-item-content>
          <v-list-item-title class="title">Sandra Adams</v-list-item-title>
          <v-list-item-subtitle>sandra_a88@gmail.com</v-list-item-subtitle>
        </v-list-item-content>
      </v-list-item>
    </v-list>

    <v-divider></v-divider>

    <v-list
      nav
      dense
    >
      <v-list-item v-for="(item, i) in items" :key="i" :to="item.link" link>
        <v-list-item-icon>
          <v-icon>{{item.icon}}</v-icon>
        </v-list-item-icon>
        <v-list-item-title>{{item.text}}</v-list-item-title>
      </v-list-item>
    </v-list>
  </v-navigation-drawer>
</template>

<script>
export default {
  name: 'MenuDrawer',

  data: () => ({
    items: [
      {
        icon: 'mdi-folder',
        text: 'Home',
        link: '/',
      },
      {
        icon: 'mdi-account-multiple',
        text: 'Starred',
        link: 'https://github.com/vuetifyjs/vuetify',
      },
      {
        icon: 'mdi-star',
        text: 'About',
        link: '/about',
      },
    ],
  }),
};
</script>

【讨论】：

【解决方案4】：

我有一个类似的任务要完成，我能够通过以下方式完成它。请参阅下面的代码。

    <v-list-item v-for="([icon, text, link], i) in items" 
     :key="i" 
     link 
      @click="$vuetify.goTo(link)" >

      <v-list-item-icon class="justify-center">
        <v-icon>{{ icon }}</v-icon>
      </v-list-item-icon>
      <v-list-item-content>
        <v-list-item-title class="subtitile-1">{{
          text
        }}</v-list-item-title>
      </v-list-item-content>
    </v-list-item>

根据文档，当我们在项目中指定链接属性时，它将被视为执行导航的 href。然后就可以利用click函数，在里面传递参数链接了。

【讨论】：