如何解决将道具数组传递到路由器链接路径中
我正在尝试根据它在其中使用的视图组件动态更新 <router-link>
路径。下面是循环遍历由每个视图组件填充的 <router-link>
数组的 compItems
。
<router-link :to="{ name: compItem.name,params: { compItems: compItem.router } }" class="cz-ds-view-related-comp" v-for="compItem in compItems" :key="compItem.name">
<div class="related-comp_icon"><img class="related-comp_icon" :src="require('@/assets/home/icons/' + compItem.atomicIcon + '')" alt=""></div>
<div class="related-comp_title"><h3>{{ compItem.name }}</h3> <img src="../../assets/home/icons/arrow-right.svg"></div>
</router-link>
export default {
name: 'relatedSection',props: {
compItems: {
type: Array
}
}
}
</script>
下面是一个定义路由器的视图组件的例子。
data () {
return {
compItems: [
{ name: 'Links',atomicIcon: 'atom.svg',router: 'links'},{ name: 'Form Elements',router: 'form-elements'},{ name: 'Avatars',router: 'avatars'},{ name: 'Badges',router: 'badges'}
]
}
}
这是我得到的控制台错误。
提前致谢!
编辑:
这是路由器文件的快照:
const routes = [{
path: '/',name: 'home',props: true,component: Home
},{
path: '/avatars',name: 'avatars',component: Avatars
},{
path: '/badges',name: 'badges',component: Badges
},{
path: '/buttons',name: 'buttons',component: Buttons
},{
path: '/breadcrumbs',name: 'breadcrumbs',component: Breadcrumbs
},{
path: '/form-elements',name: 'form-elements',component: FormElements
},{
path: '/icons',name: 'icons',component: Icons
},...
解决方法
路由器的路由定义都有小写的 name
属性。当您使用 <router-link>
按名称访问它们时,您需要使用完全匹配,但您的 compItems
具有大写名称。
此外,您在链接中使用了路由参数,但您的任何路由都没有定义。
为了使代码更清晰和正确,这里进行了重构:
<template v-for="compItem in compItems">
<router-link :to="{ name: compItem.name }" class="cz-ds-view-related-comp">
<div class="related-comp_icon">
<img class="related-comp_icon" :src="require('@/assets/home/icons/' + compItem.atomicIcon + '')" alt="">
</div>
<div class="related-comp_title">
<h3>{{ compItem.title }}</h3>
<img src="../../assets/home/icons/arrow-right.svg">
</div>
</router-link>
</template>
data () {
return {
compItems: [
{ title: 'Links',atomicIcon: 'atom.svg',name: 'links'},{ title: 'Form Elements',name: 'form-elements'},{ title: 'Avatars',name: 'avatars'},{ title: 'Badges',name: 'badges'}
]
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。