javascript - 将道具(数组)传递到路由器链接路径
问题描述
我正在尝试<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', atomicIcon: 'atom.svg', router: 'form-elements'},
{ name: 'Avatars', atomicIcon: 'atom.svg', router: 'avatars'},
{ name: 'Badges', atomicIcon: 'atom.svg', router: 'badges'}
]
}
}
这是我得到的控制台错误。
提前致谢!
编辑:
这是路由器文件的快照:
const routes = [{
path: '/',
name: 'home',
props: true,
component: Home
}, {
path: '/avatars',
name: 'avatars',
props: true,
component: Avatars
}, {
path: '/badges',
name: 'badges',
props: true,
component: Badges
}, {
path: '/buttons',
name: 'buttons',
props: true,
component: Buttons
}, {
path: '/breadcrumbs',
name: 'breadcrumbs',
props: true,
component: Breadcrumbs
}, {
path: '/form-elements',
name: 'form-elements',
props: true,
component: FormElements
}, {
path: '/icons',
name: 'icons',
props: true,
component: Icons
},
...
解决方案
路由器的路由定义都具有小写name
属性。当您使用 a<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', atomicIcon: 'atom.svg', name: 'form-elements'},
{ title: 'Avatars', atomicIcon: 'atom.svg', name: 'avatars'},
{ title: 'Badges', atomicIcon: 'atom.svg', name: 'badges'}
]
}
}
推荐阅读
- excel - 如何创建填充 Excell 单元格的下拉可点击清单?
- javascript - 我收到 Uncaught TypeError: Cannot read property 'style' of undefined" 下面的代码
- python - 背景不会与烧瓶一起运行
- node.js - 无论过滤器如何,都会发生 Bigtable 条件写入
- multithreading - jenkins 中的并行阶段是不同的进程还是只是不同的线程?
- powershell - 通过 Powershell 更新 Active Directory(本地)用户属性
- reactjs - 如何在 React 中使用 debounce
- addeventlistener - 在使用包含多个单词的类操作元素时如何使用 querySelector?
- sql - 如何合并 JSON 数组中 SQL 表产生的记录?(SQL 服务器 2014)
- java - 在 Apache Camel reout 中设置 ReplyToQMgr 和 ReplyToQ 以使用 IBM MQ 接收 COA