VueJS如何在警惕之前注册全局

Question

每个路线的beforeEach钩子都像在docs中一样：我的页面应在路线更改时滚动到顶部。

const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {
   window.scrollTo(0, 0)
      next();
})

但是我的路由器具有其他结构，因此无法正常工作：

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Contact from '@/components/Contact'

Vue.use(Router)

export default new Router({

  beforeEach: (to, from, next) => {
    window.scrollTo(0, 0)
    next();
  },

  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/kontakt',
      name: 'Contact',
      component: Contact
    },
  ]
})

在此先感谢=）还是在组件上使用.created挂钩滚动到页面顶部更好？

  created() {
    window.scrollTo(0, 0);
  }

Answer 1

您可以使代码适应docs中所需的结构：

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Contact from '@/components/Contact'

Vue.use(Router)

// create object router with the valid initialization
const router = new Router({    
  routes: [{
    path: '/',
    name: 'HelloWorld',
    component: HelloWorld
  }, {
    path: '/kontakt',
    name: 'Contact',
    component: Contact
  }, ]
});

// add the beforeEach hook
router.beforeEach((to, from, next) => {
  window.scrollTo(0, 0);
  next();
});

// export router as default
export default router;