同级跳转刷新
# 代码实现
<template>
<article>
<h2>
{{ blogPost.title }}
</h2>
<p>{{ blogPost.body }}</p>
<footer>
<router-link to="/">回到主页</router-link>
<router-link :to="`/${blogPost.id - 1}`">上一篇</router-link>
<router-link :to="`/${blogPost.id + 1}`">下一篇</router-link>
</footer>
</article>
</template>
<script>
import { getBlogPostById } from "../data/blogPosts";
export default {
data() {
return { blogPost: {} };
},
// 思路 1
// created() {
// this.blogPost = getBlogPostById(this.$route.params.postId);
// },
// watch: {
// "$route.params": function (params, oldParams) {
// this.blogPost = getBlogPostById(params.postId);
// }
// }
// 思路 2
// watch: {
// "$route.params": {
// handler: function (params, oldeParams) {
// this.blogPost = getBlogPostById(this.$route.params.postId);
// },
// immediate: true
// }
// }
// 思路 3
created() {
this.$watch(
() => this.$route.params,
function (params, oldeParams) {
this.blogPost = getBlogPostById(params.postId)
},
{
immediate: true
}
)
}
};
</script>
<style scoped>
article {
max-width: 700px;
}
footer {
margin-top: 48px;
display: flex;
gap: 24px;
}
footer a {
background: linear-gradient(90deg, hsl(240deg, 50%, 50%), hsl(280deg, 50%, 50%));
padding: 0.9em 1.4em;
border-radius: 4px;
color: white;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
编辑 (opens new window)
上次更新: 2023/04/01, 15:26:22