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>