【Vue-Router】「router-link to="{}"」がURLに変換されない

Question

困っていること

APIでデータを取得し、IDを元にCDNのVue.jsとVue-Routerで動的リンクを生成しようとしています。
router-link to="{}"にnameを指定しているのですが、URLが生成されず、以下のようになってしまいます。

URLが正しく生成されない原因が分からず、ご教授いただけますと幸いです。
よろしくお願い致します。

<a href="/{ name: 'detail', params: { id: result.id } }">タイトル</a>

ソースコード　

index.html

<!-- 表示したいリンク -->
<ul>
  <li v-for="result in results" :key="result.id">
    <router-link to="{ name: 'detail', params: { id: result.id } }">
        {{ result.title }}
    </router-link>
  </li>
</ul>
:
:
<!-- 全てCDNを使用しています -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script src="./scripts/main.js"></script>

　

main.js

const Detail = () => import('../detail.html');

const routes = [
  {
    path: '/detail/:id',
    name: 'detail',
    component: Detail
  }
];

const router = new VueRouter({
  routes,
  mode: 'history',
});

var app = new Vue({
    el: '#app',
    data: {
        results: [],
    },
    router,
    mounted () {
      // データの取得処理が入ります
    }
}).$mount('#app');

Answer 1

to の前に : を付けてください。

<router-link :to="{ name: 'detail', params: { id: result.id } }">

: は v-bind の省略記法です。

v-bind 省略記法