動(dòng)態(tài)路由的實(shí)現(xiàn)：
能夠傳遞參數(shù)的路由即為動(dòng)態(tài)路由
應(yīng)用場(chǎng)景 ： 從列表頁跳轉(zhuǎn)到詳情頁
實(shí)現(xiàn)步驟：
一. 先創(chuàng)建動(dòng)態(tài)路由組件 detail.vue (一級(jí)路由組件)
二、路由配置 （router/index.js）
1. 引入路由組件
import detail from '@/views/detail.vue'
2. 配置一級(jí)路由手蝎，該路由為動(dòng)態(tài)路由榕莺，因?yàn)閺牧斜眄撎D(zhuǎn)至詳情頁需要傳遞商品id
path: '/detail/:id' 等價(jià)于 'detail/2' --2即是傳遞的id
id屬性名要和detail中接收參數(shù)名一致
const routes = [
{
path: '/detail/:id',
component: detail
}
]
3. 在列表頁的每一個(gè)商品li上使用<router-link>
注意： to是動(dòng)態(tài)屬性
<ul v-if="list.length">
<router-link
tag="li"
v-for="item in list"
:key="item.product_id"
:to="`/detail/${item.product_id}`"
>
<p>名稱：{{item.product_name}}</p>
<p>價(jià)格：{{item.product_price}}</p>
<p><img :src="'https:' + item.img_url" alt=""></p>
</router-link>
</ul>
4.在詳情頁接收id
created(){
// $route是每一個(gè)vue實(shí)例都具有的屬性，存儲(chǔ)路由相關(guān)的信息
// 獲取列表頁傳來的商品id
let id = this.$route.params.id;
this.id = id
}