Vue.js 带数据绑定的Vue路由器参数

谁能告诉我如何在路由器参数中使用数据绑定

尝试此操作，但不起作用：

    <router-link :to="{
        name: 'product', 
        params: {
          id: '{{product.id}}',
          title: '{{product.title}}'
        }
      }">Ring 02</router-link>
    </nav>
    <router-view/>
  </section>
</template>

<script>
  import { products } from '@/assets/data.json';

  export default {
    data () {
      return {
        products
      }
    }
  }
</script>

环02
从“@/assets/data.json”导入{products}；
导出默认值{
数据（）{
返回{
产品
}
}
}

：to是v-bind:to的缩写，因此您可以访问变量和简单表达式，如字符串、条件和对象

 <router-link :to="{
        name: 'product', 
        params: {
          id: product.id,
          title: product.title
        }
      }">Ring 02</router-link>
    </nav>
    <router-view/>
  </section>
</template>

<script>
  import { products } from '@/assets/data.json';

  export default {
    data () {
      return {
        products
      }
    }
  }
</script>

环02
从“@/assets/data.json”导入{products}；
导出默认值{
数据（）{
返回{
产品
}
}
}

您是否尝试过在{{product.id}和{{product.title}之间没有单引号的情况下使用它？是的，这不起作用。