Vue——13-vue-router的导航守卫以及滚动行为

导航守卫

全局前置守卫：beforeEach(( to , from , next))
全局后置守卫：afterEach((to , form ,next))
全局解析守卫：router.beforeResolve   (一般不用)

你可以用 router.beforeResolve 注册一个全局守卫。这和 router.beforeEach 类似，区别是在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用。

路由独享守卫：beforeEnter:(to , from , next)

以及组件内守卫

渲染该组件的对应路由被 confirm 前调用:beforeRouteEnter(to , form , next)

不能获取组件实例 `this`因为当守卫执行前，组件实例还没被创建，如果打印this则出现undefined

该组件被复用时调用:beforeRouteUpdate(to, form, next)    // (2.2 新增)

导航离开该组件的对应路由时调用:beforeRouteLeave(to, from, next)

获取title名使用以下代码：

router.beforeEach((to, from, next) => {
   console.log(to);
   console.log(from);
   next()
   document.title = to.matched[0].meta.title
 })

导航内守卫离开弹窗：

const answer = window.confirm('你真的要走了吗？不确定留下？');
    if (answer) {
      next()
    } else {
      next(false)
    }

完整的导航解析流程

导航被触发。

在失活的组件里调用 beforeRouteLeave 守卫。

调用全局的 beforeEach 守卫。

在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。

在路由配置里调用 beforeEnter。

解析异步路由组件。

在被激活的组件里调用 beforeRouteEnter。

调用全局的 beforeResolve 守卫 (2.5+)。

导航被确认。

调用全局的 afterEach 钩子。

触发 DOM 更新。

调用 beforeRouteEnter 守卫中传给 next 的回调函数，创建好的组件实例会作为回调函数的参数传入。

滚动行为

对于所有路由导航，简单地让页面滚动到顶部。

scrollBehavior (to, from, savedPosition) {
  if (savedPosition) {
    return savedPosition
  } else {
    return { x: 0, y: 0 }
  }
}

命名视图

如果 router-view 没有设置名字，那么默认为 default。

router-view中是可以携带名字

<router-view name="Header"></router-view>

如果想给header设置为公共页面那么就需要用到命名视图

命名视图格式：

在index.js中把component换成components

先引入Header.vue

import Header from '@/components/Header';
components: {
    default:About,
    Header:Header