vue.js - Vue Props 值未在简单测试中通过
问题描述
我是使用 VUE 的新手,我正在测试一个简单的 vue-router,但道具在此测试中不起作用。
<div id="app">Menu:
<router-link to="/">Home</router-link> |
<router-link to="/post">Post</router-link> |
<router-link to="/foo">Foo link comment</router-link>
<router-view></router-view>
</div>
const Home = { template: '<div class="page">Welcome to my Home <router-link :to="{name:\'foo\'}">this link</router-link></div>' }
const Foo = {
props:['comment', 'msg'],
template: '<div class="page">{{msg}} Here the comment:<hr><div v-html="comment"></div><hr>Go back to <router-link :to="{name:\'home\'}">home</router-link></div>' }
const router = new VueRouter({
mode: 'history',
routes: [
{ path: '/', name:'home',component: Home },
{ path: '/foo', name:'foo', component: Foo }],
})
new Vue({
router,
el: '#app',
data: {
msg: 'Hello World',
comment : '<div class="comment">This is a <strong>bold</strong> link</div>'
}
})
以及如何在 prop HTML 代码中传递路由器链接?
解决方案
您需要在 routes 属性中添加 props 属性
{ path: '/foo', name:'foo', component: Foo , props: true}
您还需要在 router-link 中传递 prop 值
<router-link :to="{ name: 'foo',
params: { comment: comment,msg: msg }}">Foo link comment</router-link>
推荐阅读
- java - 配置 Gradle 项目以告诉 JAR 在运行时在特定文件夹中查找依赖项工件
- java - 如何在 Java 中使用 Bouncy Castle 签署公共 PGP 密钥
- android - 如何在 Firestore Android 中查询参考字段?
- php - Laravel api 调用失败
- reactjs - 'React' 已定义但从未使用过。(没有未使用的变量)
- php - 返回并比较最高计数php mysql的值
- java - 如何将所有 youtube 视频 url 以将代码嵌入到 java 中的字符串中?
- https - https 无法建立私有连接
- java - 如何正确删除 JavaFX 中的动画图像
- android - Android 计划每 5 秒一次工作一次