动态路由的实现：
能够传递参数的路由即为动态路由
应用场景 ： 从列表页跳转到详情页
实现步骤：
一. 先创建动态路由组件 detail.vue (一级路由组件)
二、路由配置 （router/index.js）
1. 引入路由组件
import detail from '@/views/detail.vue'
2. 配置一级路由，该路由为动态路由，因为从列表页跳转至详情页需要传递商品id
path: '/detail/:id' 等价于 'detail/2' --2即是传递的id
id属性名要和detail中接收参数名一致
const routes = [
{
path: '/detail/:id',
component: detail
}
]
3. 在列表页的每一个商品li上使用<router-link>
注意： to是动态属性
<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>价格：{{item.product_price}}</p>
<p><img :src="'https:' + item.img_url" alt=""></p>
</router-link>
</ul>
4.在详情页接收id
created(){
// $route是每一个vue实例都具有的属性，存储路由相关的信息
// 获取列表页传来的商品id
let id = this.$route.params.id;
this.id = id
}