具有数据绑定的Vue路由器参数

Question

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

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

    <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>

Answer 1

：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>