业务需求：在视频列表页面，点击任意一个视频的时候，获取到该视频的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，在首页里面打印了一次（注意看路由和控制台）
