vueRouter5---动态路由的实现（详情页）

能够传递参数的路由即为动态路由

应用场景 ： 从列表页跳转到详情页

实现步骤：

一. 先创建动态路由组件 detail.vue (一级路由组件)

二、路由配置 （router/index.js）

1. 引入路由组件

            import detail from '@/views/detail.vue'

2. 配置一级路由，该路由为动态路由，因为从列表页跳转至详情页需要传递商品id

id属性名要和detail中接收参数名一致

            path: '/detail/:id' 等价于  'detail/2'  --2即是传递的id
            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
            }