直接贴代码啦。
在合适位置插入
mounted() {
this.randomWallpaper(); // 首次进入触发
this.$router.afterEach(() => {
this.randomWallpaper(); // 切换路由触发
});
},
methods: {
randomWallpaper() {
// 壁纸数组，请使用实际图片名称
var wallpaper = [
"girlwithNs.jpg",
"catgirl.jpg",
"catgirl2.jpg",
];
let randomCount = Math.floor(Math.random() * wallpaper.length);
const style = document.body.style;
// 为 body 设置样式，请使用实际图片路径
style.setProperty(
"background-image",
`url('/wallpaper/${wallpaper[randomCount]}')`
);
},
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
可以看到，这跟本站更换任意配色的组件是一个套路~
扩展阅读：vuepress/vue动态更换配色方案