Vue基础整理之前置钩子 后置钩子

其实非常简单 在router.js中加入router.beforeEach和router.afterEach 函数就好了
代码如下

import Vue from 'vue'
import routes from './routes'
import Router from 'vue-router'
Vue.use(Router)
const router =  new Router({
  mode: 'history',
  routes: routes
})

//路由前置守卫相关操作
router.beforeEach((to, from, next) => {
  next()  
})

//前置钩子
router.beforeEach((to, from, next) => {
  document.title = to.meta.title;
  next();
});
//后置钩子
router.afterEach((to) => {
  console.log(to);
});

export default router

对了 如果你的路由向没有title记得加上哦

export default [
    {
      path: '/',
      redirect: '/HelloWorld',
    },
    {
      path: '/name',
      name: 'name',
      component: () => import('./components/logt.vue'),
      meta:{
        title:"加菲猫页面"
      }
    },
    {
      path: '/HelloWorld',
      name: 'HelloWorld',
      component: () => import('./components/HelloWorld.vue'),
      meta:{
        title:"编辑器页面"
      }
    }
]

这应该算是vue中最好写的函数之一了吧