vue路由中间件

在Vue.js中，可以使用路由守卫来实现类似于中间件的功能。路由守卫是Vue Router提供的功能，可以在路由跳转前后执行一些逻辑。

以下是一个简单的例子，展示如何在Vue Router中使用全局前置守卫：

import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from './components/Home.vue';
import About from './components/About.vue';
 
Vue.use(VueRouter);
 
const router = new VueRouter({
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About },
  ],
});
 
// 添加全局前置守卫
router.beforeEach((to, from, next) => {
  // 可以在这里添加路由跳转前的逻辑
  console.log('路由即将改变：', from.path, '->', to.path);
  
  // 确认路由是否需要继续
  if (to.path === '/about') {
    // 验证用户是否有权限访问 about 页面
    if (/* 用户有权限 */ true) {
      next(); // 继续路由
    } else {
      next('/'); // 跳转到首页
    }
  } else {
    next(); // 继续其他路由
  }
});
 
new Vue({
  router,
  // ...
}).$mount('#app');

在这个例子中，我们使用router.beforeEach添加了一个全局前置守卫。每次路由跳转前，都会执行这个守卫函数。在这个函数里，你可以进行身份验证、数据校验、取消路由跳转等操作。