VUE2中如何添加路由守卫

在配置路由文件中设置拦截器：

// vrouter 可以快速生成代码结构
import Vue from 'vue'
// 路由模块
import VueRouter from 'vue-router'
// use: 向Vue中注入 路由模块
Vue.use(VueRouter)

// routes: 用于存储 路径 和 组件间的对应关系
const routes = [
  // vroute-named
  {
    // 使用时: localhost:8080/news
    // 可以利用 ? 来修饰参数, 代表 可选传递
    path: '/news/:name?', // 路径
    // 名字: 不是必备属性, 为这个路由起名字, 偶尔用得上
    name: 'News',
    // 组件: 代表路径path 对应的组件
    // 值为箭头函数的语法糖写法, 触发后会引入指定的组件
    component: () => import('../views/News.vue'),
    // meta: 元数据, 用来存储自定义属性
    meta: {
      title: '今日新闻',
    },
  },
  {
    // localhost:8080/  即根路径
    path: '/',
    name: 'Home',
    // Home.vue 是新建项目时 自带的首页组件
    component: () => import('../views/Home.vue'),
    meta: {
      title: '首页',
    },
  },
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes,
})
// 必须在 router 赋值后才能用
// beforeEach: 路由的全局前置 守卫
// 可以理解成: 中间件, 拦截器...
// 会在任意路由发生切换操作时, 自动触发
router.beforeEach((to, from, next) => {
  // 固定3个参数:
  // to: 要跳转到哪
  // from: 现在在哪
  // next: 是否允许跳转
  console.log('侦测路由跳转操作')
  console.log('将要跳转到:', to)
  // 获取自定义的title属性:
  const title = to.meta.title
  // 设置为 标签栏的题目
  document.title = title

  next() //放行操作: 必须调用 路由才能继续运行
})

export default router