vue3前端开发-小兔鲜项目-路由滚动行为的设置

vue3前端开发-小兔鲜项目-路由滚动行为的设置！说白了，就是想让实现一种效果。当我们的路由发生变化时，我们希望看见滚动条能自动恢复到初始的位置（也就是顶部的位置）。

官方提供好一个自定义的代码块。我们拿来用一下就行了。

---

const router = createRouter({history: createWebHistory(import.meta.env.BASE_URL),routes: [//path和component对应关系{path:'/',component:Layout,children:[{//默认不写内容，就是会跟着一起渲染的path:'',component:Home},{path:'category/:id',component:Category},{path:'category/sub/:id',component:SubCategory}]},{path:'/login',component:Login}],//路由滚动行为定义scrollBehavior(){return{top:0}}
})

如图，我们新增了一个，路由滚动自定义行为的代码块。

里面返回一个对象，对象有一个属性叫top:0

值为0，即意味着距离顶部的像素为0像素。

---

这个比较简单，我们不再演示了。大家可以自己试试看。