Nuxt的路由配置以及傳參

Nuxt 路由可以使用a標簽進行鏈接跳轉，例如我們創建了一個demo.vue的文件

<p>
    <a href="/demo">跳轉去Demo頁面</a>
</p>

但是Nuxt中有專屬的標簽 nuxt-link, 因此上次可以改寫為：

<p>
    <nuxt-link :to="{name: 'demo'}">跳轉去Demo頁面</nuxt-link>
</p>

注： 在實際開發中，盡量使用標簽進行跳轉

 

Nuxt傳參其實也是比較好理解的

例如我們現在新建一個commodity.vue文件，然后新建一個details文件夾，並新建一個index.vue , 要求是從commodity.vue 傳遞參數， 在index.vue 中接收

commodity.vue

<p>
    <nuxt-link :to="{name: 'details', params: {id: 123}}">跳轉去Demo頁面</nuxt-link>
</p>

index.vue

<p>傳遞過來的參數：{{$route.params.id}}</p>