4.1 動態路由 => 詳情列表
導入 ： 列表三個手機都要點擊，進入詳情頁， 只需要一個組件，顯示不同的數據即可
# 入口
<router-link to="/detail/1">手機1</router-link>
<router-link to="/detail/2">手機2</router-link>
<router-link to="/detail/3">手機3</router-link>
<router-link to="/detail">手機4</router-link> 沒有參數如何????
# 規則
routes： [
// 2 . 路由規則
{ path： '/detail/：id?'， component： Detail }
]
# 獲取參數的三種方式
const Detail = {
template： `
// 方式1 ： 組件中直接讀取
<div> 顯示詳情頁內容....{{ $route.params.id }} </div>
`，
created() {
// 方式2 ： js直接讀取
// 打印只會打印一次，因為組件是復用的，每次進來鈎子函數只會執行一次
console.log(this.$route.params.id)
}，
// 方式3 ： 監聽路由的參數，為什么不需要深度監聽，因為一個路徑變化，就會對應一個對新的路由對象(地址變)
watch： {
$route(to， from) {
console.log(to.params.id)
}
}
}
05-動態路由-詳情頁.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<!--
動態路由
1. 使用參數接收不同的路由參數
path ='/detail/:id'
2. 參數可傳可不傳 path ='/detail/:id?'
-->
<div id="app">
<!-- 1. 入口 -->
<router-link to="/detail/1">手機1</router-link>
<router-link to="/detail/2">手機2</router-link>
<router-link to="/detail/3">手機3</router-link>
<router-link to="/detail">手機4</router-link>
<!-- 4. 出口 -->
<router-view></router-view>
</div>
<script src="./vue.js"></script>
<script src="./node_modules/vue-router/dist/vue-router.js"></script>
<script>
// 3. 組件
const detail = {
template: `<div>詳情頁組件 {{ $route.params.id }}</div>`
}
// 實例化
const router = new VueRouter({
// 2. 規則
routes: [{
path: '/detail/:id?',
component: detail
}]
})
const vm = new Vue({
router,
el: '#app',
data: {}
})
</script>
</body>
</html>