라우터 링크와 vue 및 vuetify 혼동

라우터 링크와 vue 및 vuetify 혼동

미리 정의된 템플릿을 사용하여 vue-roouter를 사용하는 방법:

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

내 항목 개체에 링크를 추가했음

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

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

라우터 링크 구성요소를 어디에 두어야 할지 혼란스럽다.

v-list-tile v-btn그리고v-card모두 확장하다router-link, 그래서 당신은 어떤 것을 사용할 수 있다.router-link대신 해당 구성요소에 직접 속성이 제공.

당신의 경우 당신은 그냥 사용할 수 있다.<v-list-tile :to="item.link">

나도 같은 문제가 있었는데 이렇게 해결했다.

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

예:

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

나는 성취해야 할 비슷한 과제를 가지고 있었고 다음과 같은 방법으로 할 수 있었다.아래 코드를 참조하십시오.

    <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로 간주될 것이다.그런 다음 클릭 함수를 사용하여 그 안에 있는 파라미터 링크를 통과할 수 있다.

참조URL: https://stackoverflow.com/questions/47586022/router-link-with-vue-and-vuetify-confusion