如何在 vuejs 中通过 将 props 传递给命名视图?

2023-12-20

我是 VueJS 和前端开发的新手。 我希望将一个 props(在本例中是我的俱乐部的 id)传递给我的组件/视图。

它最初是与<router-link :to="{ name: 'club', params: {id: club.id } }">。 我的组件调用 props“id”,而我的视图名为 Club,其参数 props:true;

快进一会儿,我必须添加命名视图。 (我现在只添加了一个 - 但我将有一个视图内容和一个导航)。

mode: 'history',
  base: process.env.BASE_URL,
  linkExactActiveClass: 'is-active',
  routes: [
    {
      path: '/',
      name: 'clubs',
      components: {
        content: Clubs
      }
    },
    {
      path: '/club/:id',
      name: 'club',
      props: true,
      components: {
        content: Club
      }
    }
  ]
})

这打破了一切。 在 Vue 扩展中,我可以看到我的 send 将我的 props 作为参数发送(参见附件 1),但是一旦进入视图,id 就未定义(参见附件 2)。

我错过了什么吗?

Attachement 1 Router Link

Attachement 2 View Data


你需要设置一个props在这种情况下每个命名视图的值。例如

components: {
  content: Club
},
props: {
  content: true
}

我在文档中找不到对此的合理解释,但它确实在此处的示例中有所体现:

https://router.vuejs.org/guide/essentials/passing-props.html https://router.vuejs.org/guide/essentials/passing-props.html

请注意代码示例中隐藏的以下注释:

// for routes with named views, you have to define the `props` option for each named view:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在 vuejs 中通过 将 props 传递给命名视图? 的相关文章

  • VueJS - 访问已安装的存储数据

    我无法理解以下内容 我有一个store其中包含应用程序所需的变量 特别地 有一个globalCompanies哪些商店 globalCompanies current all currentName 在另一个组件中 我想执行以下操作 mou
  • 如何仅在某些页面上显示验证码图标(VUE reCAPTCHA-v3)?

    我使用这个包 https www npmjs com package vue recaptcha v3 https www npmjs com package vue recaptcha v3 我添加了我的 main js import V
  • 如何在Vue中提交表单,重定向到新路由并传递参数?

    我正在使用 Nuxt 和 Vue 我正在尝试提交表单 将用户重定向到包含提交的参数的新路由 发送 API 请求以获取一些数据 然后渲染该数据 我通过简单地将表单操作设置为新路径并手动将所有 URL 参数添加到 API 请求来实现此目的 首先
  • 如何在 vuex nuxt 中获取嵌套 getter

    i have store index js像这样 new Vuex Store modules nav namespaced true modules message namespaced true state count 0 conver
  • npm run dev 和 npm run production 之间的区别

    我对 Laravel 和 vue js 很陌生 请让我知道它们之间有什么区别npm run dev and npm run production 这和环境有关系吗 npm run dev创建源映射并且不会缩小 js css 这使得调试和查找
  • Vuetify 自动完成类似项目未显示

    我的本地案例中有类似标题的自定义帖子API我尝试通过搜索查询显示帖子items array Data count 5 entries id 3 title Senior developer Python id 4 title Senior
  • Mapbox JS SDK CSS样式表导致地图消失

    我在 VueJS 应用程序中使用 Mapbox JavaScript SDK 我可以毫无问题地显示地图 现在我想添加一些标记 我懂了在本页 https docs mapbox com mapbox gl js api 您需要先导入 CSS
  • Vue 监听 Vuex 提交吗?

    有没有一种方法可以监听 Vuex 提交 而不观察任何随提交而更改的属性 只是简单地找出是否发生了提交 我有一个 Filter 组件 想将其放入 NPM 包中 但我已经有一个用例 在该用例中 我希望设置一个 cookie 在选择过滤器时存储过
  • 在 Vue.js 中隐藏 div onclick

    以下 jQuery 的 Vue js 等价物是什么 btn click function hideMe hide jQuery 开箱即用 而 Vue js 则不然 要初始化 Vue js 组件或应用程序 您必须将该组件及其数据绑定到模板内的
  • 在渲染组件之前从 api 获取数据

    我在渲染页面之前发送 2 个 api 请求 const Profile template profile attributes null photos data function return attributes Profile attr
  • 错误:[vuex] 期望 string 作为类型,但发现未定义

    学习Vuex 我写了一个简单的登录页面示例项目 https github com vuejs vuex tree dev examples shopping cart和document https vuex vuejs org zh gui
  • 左侧导航菜单上部隐藏

    当滚动到页面最底部时 左侧导航菜单的顶部将被隐藏 The image before scrolling is shown below 滚动后的效果如下图 我不确定此问题的确切原因 因此我将不胜感激任何有关识别和解决该问题的建议或帮助 为了确
  • 不知道如何预览我生成的 Nuxt3 应用程序

    我刚刚在静态模式下创建了一个 Nuxt3 但我不想每次都将其推送到 Netlify 进行预览 这是我的nuxt config js 没有改变 import defineNuxtConfig from nuxt export default
  • 在重复内容区域添加

    我有一个菜单组件 简单地说 它接受一个带有一系列选项的道具 并为每个选项在菜单中呈现一个项目 我希望能够根据用例自定义每个菜单项内的标记 因此我在菜单项元素内使用了占位符 你可以在这个中看到一个例子fiddle https jsfiddle
  • 如何在生产模式下为 Chrome 扩展启用 Vue 开发工具?

    我正在构建一个 chrome 扩展 并使用 vue cli webpack 配置 我希望能够在运行后使用 vue devtoolsnpm 运行构建命令 我尝试添加Vue config devtools true 在 main js 中 或者
  • 如何在自定义组件中使用 Vue.js 插件?

    我需要输出一个表格及其内容 可以通过 Ajax 进行更新 所以我打算使用vue tables 2 https github com matfish2 vue tables 2 https github com matfish2 vue ta
  • Vue.JS 2.5.1:未捕获的语法错误:意外的令牌导出

    我试图使用 VueJS 和 Bootstrap Vue 制作一个单选按钮 但是当我制作它时发生了这种情况 我预计这是语法错误 就像它所说的那样 但我似乎找不到任何线索 所以我尝试复制粘贴代码 这是 test radio php 的完整代码
  • 如何获取 vuejs 组件单元测试中定义的“this”变量

    我正在尝试在 npm 脚本中使用 mocha webpack 来测试 vuejs 组件 我在测试中像这样嘲笑 vuex 商店 const vm new Vue template div div
  • 如何使用vue v3项目将bootstrap v5(js + css)导入nuxt.js v2.14?

    截至今日 引导程序vue不支持vue v3 and 引导程序 v5 我只想import引导文件到努克斯v2 14项目 谁能给我一个具体的例子如何实现这一点 由于我一周前刚刚开始使用 vue nuxt 因此我非常感谢此时的帮助 附 强调 CS
  • 如何修复 Nuxt 中导航器/窗口/文档未定义的问题

    我试图确定 Nuxt 应用程序内的 UserAgent 和 Retina 信息 但应用程序抛出错误并显示导航 窗口未定义 我如何在 nuxt 应用程序中获取这些信息 const userAgent navigator userAgent t

随机推荐

  • 参数.被调用者替代方案

    As arguments callee将被弃用 我将在以下表达式中使用什么来代替arguments callee var self this this async function if test then else self async
  • 通过 JMH 测量 sun.misc.Unsafe.compareAndSwap 中的奇怪行为

    我决定使用不同的锁定策略来测量增量 并为此使用 JMH 我使用 JMH 来检查吞吐量和平均时间 并使用简单的自定义测试来检查正确性 有六种策略 原子数 读写锁定计数 与易失性同步 无易失性的同步块 sun misc Unsafe compa
  • 使用 eval() 是否有充分的理由?

    在我看来 这eval 受到与 goto 相同的蔑视 并由eval 我的意思是一个将字符串作为代码执行的函数 如 PHP Python JavaScript 等中所示 是否存在使用eval 是否合理 perl 除外 如果没有 为什么有这么多语
  • SQL:使用 NULL 值与默认值

    什么是pros and cons使用的空值在 SQL 中而不是默认值 附言 这里已经提出了许多类似的问题 但没有一个回答我的问题 我不知道你为什么要把这些与案例进行比较 null意味着某些列是空的 没有值 而当我们不在查询中直接设置它时 默
  • Zsh 想要自动更正命令,前面有一个 _

    我最近刚刚开始使用 Zsh 在 shell 提示符中获得一些集成支持 以显示我的 Git 状态等 当我输入 ruby v 为了确认我正在运行的 ruby 版本 Zsh 询问我是否要将命令更改为 ruby 在提示符处说 不 并且命令按预期完成
  • Azure 持久函数示例显示不允许同步函数

    我正在逐步完成 Azure 培训 我目前正在看https learn microsoft com en us learn modules create long running serverless workflow with durabl
  • 使用 htaccess 修复拼写错误的 url

    所以我的网站有一个非常简单的问题 至少我认为如此 我需要能够将任何拼写错误的 URL 重定向到正确的 URL 如果我向你们解释它比描述它更容易 例如 我们以这个网址为例 http www tomshardware com reviews r
  • 如何在CSS中添加等于图像宽度一半的负边距?

    我正在使用图像height 100vh 因此根据屏幕的分辨率 其尺寸会发生变化 我想为其添加负左边距 等于其宽度的一半 这取决于屏幕分辨率 有什么解决方案可以只用 CSS 来做到这一点吗 如果负左位置取决于 half 元素宽度你可以这样做
  • #define/#undef 具有特殊含义的标识符是否属于未定义行为?

    对问题的回答禁用 gcc 中的覆盖检查 https stackoverflow com q 30303228 1708801建议使用 Doverride 在命令行上禁用错误使用的错误override http en cppreference
  • 抛出异常与使用 switch 语句返回空值

    所以我有一个函数可以格式化日期以强制给定的枚举 DateType CURRENT START END 在使用 switch 语句的情况下处理返回值的最佳方法是什么 public static String format Date date
  • Rmarkdown 文件的 pandoc-citeproc 错误 83

    我有以下文档 我正在尝试使用 Rstudio 进行编译 title shorttitle author bibliography library bib output papaja apa6 pdf r message FALSE warn
  • JQuery动画:是否可以在动画过程中改变速度?

    我想将 div 向下移动一页 并且希望它在到达目标时减慢速度 我尝试使用带有递归函数的回调 但看起来并不顺利 function MovePanel sidePanel animate marginTop newCurrTop moveSpe
  • Webgl gl.viewport 更改

    我在调整画布大小时遇到 问题gl viewport sync 假设我从画布开始300x300 画布 https dl dropbox com u 96108589 shapes 300x300 png 以及初始化gl viewport相同尺
  • Cucumber:找到带有标签文本X的输入?

    在 Cucumber 中 我尝试创建这样的步骤 Then I should see Example business name in the Business name input 我希望将 公司名称 输入定义为 标签包含文本 公司名称 的
  • 如何将 Java 转换为 Exe [重复]

    这个问题在这里已经有答案了 可能的重复 将java程序编译成exe https stackoverflow com questions 2011664 compiling a java program into an exe 你好 我想将我
  • Rails Capistrano 的 rbenv 路径错误?

    我尝试使用卡皮斯特拉诺在 Rails 应用程序上 但我遇到了一些问题 当我跑步时cap production deploy check 看起来还可以 只有错误的信息 这有关系吗 DEBUG a8c55ce2 Command usr bin
  • 将数据发布到 Flex/Flash (mxml) 应用程序

    我的 Flex 应用程序需要根据数据库组过滤用户 根据它们所属的组 有一个 config xml 文件用于填充 swf 我是这样想的 1 客户端进入一个 aspx 页面 其中包含一个需要用户名和密码的表单 2 在服务器端我确认用户凭证3 一
  • 如何更改视图比例

    我正在尝试制作像欧洲体育应用程序中那样的侧边栏菜单 当菜单从左侧滑动时 sourceviewcontroller向左滑动并变小 var percentWidthOfContainer containerView frame width 0
  • System.IdentityModel.Tokens 和 Microsoft.IdentityModel.Tokens 之间的冲突

    我在使用 System IdentityModel Tokens 时遇到冲突 using System using System Configuration using System Data using System Data SqlCl
  • 如何在 vuejs 中通过 将 props 传递给命名视图?

    我是 VueJS 和前端开发的新手 我希望将一个 props 在本例中是我的俱乐部的 id 传递给我的组件 视图 它最初是与