比如點了商品詳細資料，會導到商品詳細資料頁面並帶上id，或者點了商品分類，將類別id帶過去抓出該類別的商品資料等等。
巢狀路由用法:
同一層page帶動態參數用法:
跳轉頁面可直接使用nuxt-link
若是要用類似v-to的用法來存取v-for的變數，要用:to
本筆記參考:
https://it

職場產業

學習

音樂藝文

<ul>
  <li class="draft-block draft--li">比如點了商品詳細資料，會導到商品詳細資料頁面並帶上id，或者點了商品分類，將類別id帶過去抓出該類別的商品資料等等。</li>
</ul>
<div class="draft-block draft--p left"></div>
<div class="draft-block draft--p left">巢狀路由用法:</div>
<div class="draft--imgNormal draft-block"><div><div style="height:702px" class="image-block-prerender" data-src="https://images.vocus.cc/b40646c8-40ac-4049-852d-9262dee603d3.png" data-width="702" data-height="377" data-position="center"></div><figcaption class="imageCaption draft-block" style="cursor:text;display:block"></figcaption></div></div>
<div class="draft--imgNormal draft-block"><div><div style="height:508px" class="image-block-prerender" data-src="https://images.vocus.cc/37167ad1-d28a-4a27-8ff8-35c0ba6c81ed.png" data-width="508" data-height="330" data-position="center"></div><figcaption class="imageCaption draft-block" style="cursor:text;display:block"></figcaption></div></div>
<div class="hr__AtomHrContainer-sc-1afmttx-0 dsBIOm draft-block"><pre class="hr__HrWrapper-sc-1afmttx-1 hUbgX draft--hr"><hr class="hr__Hr-sc-1afmttx-2 iegMSY"></pre></div>
<div class="draft-block draft--p left">同一層page帶動態參數用法:</div>
<div class="draft--imgNormal draft-block"><div><div style="height:705px" class="image-block-prerender" data-src="https://images.vocus.cc/33967870-8a3c-4893-933a-e39b655cffb4.png" data-width="705" data-height="357" data-position="center"></div><figcaption class="imageCaption draft-block" style="cursor:text;display:block"></figcaption></div></div>
<div class="draft--imgNormal draft-block"><div><div style="height:502px" class="image-block-prerender" data-src="https://images.vocus.cc/29db92c5-0de8-441b-a0df-050725304ae5.png" data-width="502" data-height="338" data-position="center"></div><figcaption class="imageCaption draft-block" style="cursor:text;display:block"></figcaption></div></div>
<div class="hr__AtomHrContainer-sc-1afmttx-0 dsBIOm draft-block"><pre class="hr__HrWrapper-sc-1afmttx-1 hUbgX draft--hr"><hr class="hr__Hr-sc-1afmttx-2 iegMSY"></pre></div>
<ul>
  <li class="draft-block draft--li">跳轉頁面可直接使用nuxt-link</li>
</ul>
<pre class="public-DraftStyleDefault-pre draft-block"><pre class="draft--code-block">&lt;NuxtLink to="/product-123"&gt;product&lt;/NuxtLink&gt;</pre></pre>
<ul>
  <li class="draft-block draft--li">若是要用類似v-to的用法來存取v-for的變數，要用:to</li>
</ul>
<pre class="public-DraftStyleDefault-pre draft-block"><pre class="draft--code-block">&lt;NuxtLink :to="'/product/category/' + main.id"&gt;product&lt;/NuxtLink&gt;</pre></pre>
<div class="draft-block draft--p left"></div>
<div class="draft-block draft--p left"></div>
<div class="draft-block draft--p left"><span style="font-style: italic; ">本筆記參考:</span></div>
<ol>
  <li class="draft-block draft--li"><a href="https://ithelp.ithome.com.tw/articles/10293441" target="_blank" class="draft--a"><span style="font-style: italic; ">https://ithelp.ithome.com.tw/articles/10293441</span></a></li>
  <li class="draft-block draft--li"><a href="https://ithelp.ithome.com.tw/articles/10208046" target="_blank" class="draft--a"><span style="font-style: italic; ">https://ithelp.ithome.com.tw/articles/10208046</span></a></li>
  <li class="draft-block draft--li"><a href="https://stackoverflow.com/questions/59841669/how-can-i-use-a-v-for-value-in-to-nuxt-link" target="_blank" class="draft--a"><span style="font-style: italic; ">https://stackoverflow.com/questions/59841669/how-can-i-use-a-v-for-value-in-to-nuxt-link</span></a></li>
</ol>
<div class="draft-block draft--p left"></div>

比如點了商品詳細資料，會導到商品詳細資料頁面並帶上id，或者點了商品分類，將類別id帶過去抓出該類別的商品資料等等。

<NuxtLink to="/product-123">product</NuxtLink>

若是要用類似v-to的用法來存取v-for的變數，要用:to

<NuxtLink :to="'/product/category/' + main.id">product</NuxtLink>

https://ithelp.ithome.com.tw/articles/10293441

https://ithelp.ithome.com.tw/articles/10208046

https://stackoverflow.com/questions/59841669/how-can-i-use-a-v-for-value-in-to-nuxt-link

Nuxt 3 動態路由