Vue 组件：动态使用 router-link 或 href 属性

Posted 2023-02-23

【中文标题】Vue 组件：动态使用 router-link 或 href 属性

【英文标题】：Vue component: dynamically use router-link or href property

【发布时间】：2020-03-28 06:59:10

【问题描述】：

我正在使用以下代码生成一个菜单：

<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'
                
            ]
        )

请注意，前两项有一个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

有可能吗？

【参考方案1】：

如果有:href 属性，它应该生成一个正常的链接，如果有:to，它会渲染一个路由器链接。您应该能够在 v-list-item 中同时使用 :to 和 :href 而无需任何条件逻辑...

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

Demo