vue、nuxt、uniapp实现全局路由拦截的方式和区别

我们知道vue、nuxt、uniapp虽然都是用的vue作为开发代码的形式，但是他们的路由的实现和拦截却是完全不一样的形式，下面将说明一下对应路由的实现方式以及拦截方式。

vue的路由和路由拦截
Vue 的路由系统由 vue-router 实现，是专门为 Vue.js 设计的前端路由库。它能过通过 JavaScript 对象数组配置路由，非常灵活。还能无缝集成 Vue 组件，通过 实现组件视图的切换。
示例：
1.安装 vue-router：npm install vue-router
2.配置路由：

import Vue from 'vue';
import Router from 'vue-router';
import Home from '@/components/Home.vue';
import About from '@/components/About.vue';
 
Vue.use(Router);
 
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
];
 
const router = new Router({
  mode: 'history', // 'hash' or 'history' mode
  routes
});
 
export default router;

Vue Router 提供了全局前置守卫，它可以在路由切换之前对请求进行拦截。全局前置守卫可以用来检查用户是否已经登录，或者检查用户是否具有访问该页面的权限。可以在上面的代码中添加一下代码添加路由拦截。

// 添加全局前置守卫
router.beforeEach((to, from, next) => {
  // 可以在这里进行路由守卫逻辑，例如身份验证、权限校验等
  // 确定路由是否可以继续
  next(); // 继续至下一个钩子或路由
  // next(false); // 中断当前的导航
  // next('/path'); // 跳转到一个不同的地址
  // next(error); // (2.4.0+) 如果传入任何参数且它不是上述提到的类型，则导航会终止并且该参数会传递给路由器的 onError 处理器。
});
 
// 添加全局后置钩子
router.afterEach((to, from) => {
  // 可以在这里进行一些路由跳转后的处理逻辑
});

nuxt的路由和路由拦截
在Nuxt.js中，可以在pages目录下定义路由，系统会自动根据文件名和目录结构生成对应的路由。
例如，在pages目录下创建一个users目录，并在该目录下创建两个文件：_id.vue和index.vue，Nuxt.js会生成对应的动态路由和嵌套路由。

pages/users/_id.vue：

<template>
  <div>User ID: {{ $route.params.id }}</div>
</template>

pages/users/index.vue：

<template>
  <div>List of Users</div>
</template>

在文件中nuxt的路由组件

<nuxt-link>	nuxt.js中切换路由
<Nuxt />	nuxt.js的路由视图

Nuxt.js允许在router对象的middleware属性中定义全局路由拦截，或在各个页面/组件中定义局部路由拦截。

在nuxt.config.js中定义全局路由拦截：

export default {
  router: {
    middleware: 'auth' // 使用已定义的auth中间件
  }
}

在middleware目录下创建auth.js文件，实现路由拦截逻辑：

export default function ({ store, redirect, route }) {
  // 通过添加一些条件判断，若未满足判断则跳转路由
  if (!store.state.auth.loggedIn) {
    return redirect('/login') // 通过redirect重置路由
  }
}

uniapp的路由和路由拦截
uni-app页面路由为框架统一管理，我们可以在pages.json里配置每个路由页面的路径及页面样式。所以 uni-app 的路由用法与 Vue-Router 不同，如仍希望采用 Vue-Router 方式管理路由，可在插件市场搜索 Vue-Router，然后进行上面那种路由方式。
在 pages.json 中配置路由：

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页"
      }
    },
    {
      "path": "pages/about/about",
      "style": {
        "navigationBarTitleText": "关于我们"
      }
    }
  ],
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "pagePath": "pages/about/about",
        "text": "关于"
      }
    ]
  }
}

在uni-app中，可以使用uni.addInterceptor来实现路由拦截。这个功能可以在进入一个页面前进行一些操作，比如登录状态检查、权限校验等。
1.首先在根目录下新建一个文件夹router（名称任意）。在router文件夹下建一个interceptor.js。

2.在interceptor.js中写入

// 添加拦截器
uni.addInterceptor('navigateTo', {
  // 页面跳转前进行拦截, invoke根据返回值进行判断是否继续执行跳转
  invoke(e) {
    // 在跳转前执行的操作
    console.log('即将跳转到页面：' + e.url);
    // 检查登录状态，如果未登录，跳转到登录页面
    if (!isLogin()) {
      uni.redirectTo({
        url: '/pages/login/login'
      });
      // 返回true将停止跳转，返回false继续跳转
      return true;
    }
    // 继续执行跳转
    return false;
  },
  success(e) {
    // 跳转成功后的操作
    console.log('跳转成功');
  },
  fail(e) {
    // 跳转失败后的操作
    console.error('跳转失败');
  }
});

uni.addInterceptor('switchTab', {
    // tabbar页面跳转前进行拦截
    invoke (e) {
       // 在跳转前执行的操作
    	console.log('即将跳转到页面：' + e.url);
	    // 检查登录状态，如果未登录，跳转到登录页面
	    if (!isLogin()) {
	      uni.redirectTo({
	        url: '/pages/login/login'
	      });
	      // 返回true将停止跳转，返回false继续跳转
	      return true;
    	}
	    // 继续执行跳转
	    return false;
    },
    .....
})

function isLogin() {
  // 检查登录状态的逻辑
  // 这里仅为示例，实际应该根据项目情况来判断
  return true; // 假设用户已登录
}

在main.js中引用。

import '@/router/Interceptor.js';//引入拦截