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像素。
这个比较简单,我们不再演示了。大家可以自己试试看。