Vue 구성 요소: 라우터 링크 또는 href 속성을 동적으로 사용

Vue 구성 요소: 라우터 링크 또는 href 속성을 동적으로 사용

다음 코드로 메뉴를 생성하는 중:

<v-list-item v-for="item in items" :key="item.title" link :to="item.to">
    <v-list-item-action>
        <v-icon>{{item.icon}}</v-icon>
    </v-list-item-action>
    <v-list-item-content>
        <v-list-item-title>{{item.title}}</v-list-item-title>
    </v-list-item-content>
</v-list-item>

data: () => ({
            items: [
                {
                    title: 'Nova Viagem',
                    to: '/viagens/cadastrar',
                    icon: 'fa-route'
                },
                {
                    title: 'Lista de Viagens',
                    to: '/viagens/listar',
                    icon: 'fa-list'
                },
                {
                    title: 'Sair',
                    href: '/logout',
                    icon: 'fa-sign-out-alt'
                }
            ]
        })

처음 2개 품목은to생성에 사용되는 속성:router-link, 그러나 마지막 아이템은href공용 링크를 생성하는 데 사용할 속성(vue 라우터 링크가 아님).

동적으로 변경하는 방법:to로href이 줄에?

<v-list-item v-for="item in items" :key="item.title" link :to="item.to">

뭐랄까

item.to ? :to="item.to" : href="item.href" //if item has to, use to, else use href

가능합니까?

만약:href프로펠러가 정상 링크를 생성해야 하는 경우:to라우터 링크를 렌더링할 것인가?두 가지를 다 사용할 수 있어야 한다.:to그리고:href에서v-list-item조건부 논리 없이...

       <v-list-item v-for="item in items" :key="item.title" link 
                :to="item.to" 
                :href="item.href">
                 ...
       </v-list-item>

데모

참조URL: https://stackoverflow.com/questions/59159675/vue-component-dynamically-use-router-link-or-href-property