Vue - 使用 router-link 将道具传递给路由器

Question

我有一个测验组件，目前正在将本地道具传递给本地组件

<component  
    :id="quiz.id" 
    :questions="QuizQuestions"
/>

我现在想创建路由并传递道具

path: '/quiz',
  components: {
    default: Quiz,
    nav: MainNav
  },
}
}

<router-link path="/quiz">Take the quiz</router-link>

我可以将它们作为参数传递，但问题对象中有 50 个问题，我如何将它们作为道具传递给路由？我查看了文档，但无法弄清楚它是如何完成的。

编辑。

因此，您只需将它们添加为参数即可完成 2 件重要的事情。

路径必须是命名路径

<router-link :to="{ name: 'quiz', params: {questions: QuizQuestions} }">Go to quiz</router-link>

路由必须命名（'quiz' 在我的示例中），您还需要将 props 设置为 true 以显式使用 props 而不是正常的 url 参数。

name: 'quiz'
path: '/quiz',
components: {
default: Quiz,
nav: MainNav
 },
 props: {
   default: true,
   nav: true
},

Answer 1

最好的方法是像这样使用它：

<router-link :to="{ name: 'Quiz', params: { questions: QuizQuestions }}">Linkname</router-link>

Vue - passing props to router with router-link