業務需求：在視頻列表頁面，點擊任意一個視頻的時候，獲取到該視頻的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，在首頁裏面打印了一次（注意看路由和控制檯）
