VueJS 路由点击章节测验答案

【问题标题】：VueJS routing on click to chapter quizVueJS 路由点击章节测验
【发布时间】：2019-07-02 14:19:11
【问题描述】：

我是 vuejs 的新手。我需要使用路径 /chapter/{{id}}/quiz 创建一个路由器链接测验。它将打开另一个组件

路径

    { path: '/chapter/:id(\\d+)/quiz', component: require('./components/Quiz.vue') },

路由器链接

            <a href="#" @click="editModal(chapter)">
                        <i class="fa fa-edit blue"></i>
                    </a>
                    /
                    <router-link :to="/chapter/{{chapter.id}}/quiz">
                        <i class="fa fa-question-circle blue"></i>
                    </router-link>

目前我遇到错误属性内的插值已被删除。请改用 v-bind 或冒号简写。例如，不要使用<div id="{{ val }}">，而是使用<div :id="val">

【问题讨论】：

标签： laravel vue.js

【解决方案1】：

您不能将{{ }} 用于属性值。因此，对于您的 router-link 组件，您必须使用 javascript 字符串连接来添加 chapter.id 或使用计算属性来生成 url。

<router-link :to="'/chapter/' + chapter.id + '/quiz'">

或者如果你使用的是 es6，你可以使用template literals:

<router-link :to="`/chapter/${chapter.id}/quiz`">

【讨论】：