业务需求：在视频列表页面，点击任意一个视频的时候，获取到该视频的id，并跳转到视频播放页面，在视频播放页面可以通过该视频的id查询视频详情信息
解决思路：
1、将id存入vuex中，使用状态管理机维护起来
问题：在视频播放页面刷新浏览器的时候，id丢失
2、使用路由机制，在视频列表页面点击任一视频的时候，将该视频id拼接在路由上，在视频播放页面获取路由上拼接的id即可
this.$router.push({path:'/',query:{id}})
this.$route.query.id
问题：能力所限，暂时没遇到。
模拟代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>路由携带参数</title> <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script> <script src="https://cdn.bootcss.com/vue-router/3.1.3/vue-router.js"></script> </head> <body> <div id="app"> <router-view></router-view> <button @click="toMineHandler(1)">跳到我的</button> <button @click="toHomeHandler">跳到首页</button> </div> <script> // 注册Home组件 let Home = { template:` <div>首页</div> ` } // 注册Mine组件 let Mine = { template:` <div>我的</div> `, // 在Home页面实例化完成的时候，通过this.$route获取路由上携带的参数 created(){ let id = this.$route.query.id; console.log("id:",id) } } // 注册路由 let router = new VueRouter({ routes:[{ path:'/', component:Home },{ path:'/mine', component:Mine }] }) new Vue({ el:"#app", router, methods:{ // 跳转到Home首页的时候，携带了一个参数id，拼接在路由上 toMineHandler(id){ this.$router.push({ path:'/mine', query:{id} }) }, toHomeHandler(){ this.$router.push({path:'/'}) } } }) </script> </body> </html>
效果：在我的页面跳转到首页的时候，路由携带了一个参数id，在首页里面打印了一次（注意看路由和控制台）
