用Vue实现页面访问拦截

在Vue中实现页面访问拦截，通常是通过路由守卫来完成。以下是一个简单的例子，展示如何在Vue应用中使用全局前置守卫来拦截路由的变化。

// main.js 或 router.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from './components/Home.vue';
import Login from './components/Login.vue';
 
Vue.use(VueRouter);
 
const routes = [
  { path: '/home', component: Home },
  { path: '/login', component: Login }
];
 
const router = new VueRouter({
  routes
});
 
// 添加路由守卫
router.beforeEach((to, from, next) => {
  // 检查用户是否已经登录
  if (to.path === '/home' && !isUserLoggedIn()) {
    // 如果用户未登录且尝试访问home页面，重定向到登录页面
    next('/login');
  } else {
    // 否则，继续正常的路由
    next();
  }
});
 
function isUserLoggedIn() {
  // 这里应该是检查用户是否登录的逻辑，例如检查token或session
  // 返回 true 或 false
  return true; // 假设用户已登录
}
 
new Vue({
  router,
  // ...
}).$mount('#app');

在这个例子中，我们定义了一个全局前置守卫，它会在任何路由跳转前触发。我们检查用户是否尝试访问/home路径，并且用户未登录（isUserLoggedIn函数应该包含检查用户登录状态的逻辑）。如果条件满足，用户会被重定向到/login页面。这个例子演示了如何使用Vue Router的路由守卫来实现页面访问拦截。