87,910
社区成员
发帖
与我相关
我的任务
分享vue路由切换如何使子路由滚动到顶部
vue-cli3+element 搭建的后台管理系统，在路由切换后如果使子路由页面滚动到顶部，而不是上一个页面滚动的高度
...全文
请发表友善的回复…
发表回复
Dr立 2019-04-26
- 打赏
- 举报
你的路由是怎么配的？办法有很多种，但是得先看看路由怎么配的
ãã 2019-04-26
- 打赏
- 举报
在home里 定义一个 updated（）
然后把 router 外边div 给个id
updated(
let scrTop = document.getElementById('scrTop');
scrTop.scrollTop = 0;
)
路由切换 都会走 updated
随便起的名字也被占用 2019-04-26
- 打赏
- 举报
import Vue from "vue"
import Router from "vue-router"
Vue.use(Router)
export default new Router({
mode: "history",
base: process.env.BASE_URL,
scrollBehavior: () => ({ y: 0 }),
routes: [
{
path: "/",
redirect: "/layout"
},
{
path: "/login",
name: "login",
component: () =>
import(/* webpackChunkName: "login" */ "./views/Login.vue")
},
{
path: "/layout",
name: "layout",
redirect: "/home",
component: () =>
import(/* webpackChunkName: "layout" */ "./views/Layout.vue"),
meta: {
title: "layout"
},
children: [
{
path: "/home",
name: "home",
component: () =>
import(/* webpackChunkName: "home" */ "./views/Home.vue"),
meta: {
keys: "home",
title: "首页"
}
},
{
path: "/achievement",
name: "achievement",
component: () =>
import(/* webpackChunkName: "achievement" */ "./views/Achievement.vue"),
meta: {
keys: "achievement",
title: "我的业绩"
}
},
{
path: "/usermanage",
name: "usermanage",
component: () =>
import(/* webpackChunkName: "usermanage" */ "./views/Usermanage.vue"),
meta: {
keys: "usermanage",
title: "用户管理"
}
},
{
path: "/organization",
name: "organization",
component: () =>
import(/* webpackChunkName: "organization" */ "./views/Organization.vue"),
meta: {
keys: "organization",
title: "组织管理"
}
},
{
path: "/service",
name: "service",
component: () =>
import(/* webpackChunkName: "service" */ "./views/Service.vue"),
meta: {
keys: "service",
title: "业务报表"
}
},
{
path: "/performance",
name: "performance",
component: () =>
import(/* webpackChunkName: "performance" */ "./views/Performance.vue"),
meta: {
keys: "service",
title: "业绩报表"
}
},
{
path: "/violation",
name: "violation",
component: () =>
import(/* webpackChunkName: "violation" */ "./views/Violation.vue"),
meta: {
keys: "appcenter",
title: "违章查询"
}
},
{
path: "/statistics",
name: "statistics",
component: () =>
import(/* webpackChunkName: "statistics" */ "./views/Statistics.vue"),
meta: {
keys: "dataservice",
title: "查询统计"
}
},
{
path: "/account",
name: "account",
component: () =>
import(/* webpackChunkName: "account" */ "./views/Account.vue"),
meta: {
keys: "dataservice",
title: "结算对账"
}
},
{
path: "/helpcenter",
name: "helpcenter",
component: () =>
import(/* webpackChunkName: "helpcenter" */ "./views/Helpcenter.vue"),
meta: {
keys: "helpcenter",
title: "结算对账"
}
}
]
},
{
path: "/about",
name: "about",
component: () =>
import(/* webpackChunkName: "about" */ "./views/About.vue")
}
]
})
