如果用户直接通过浏览器url访问受保护的路由，如何重定向到组件？

// 路由配置文件（router.js）
import Vue from 'vue';
import Router from 'vue-router';
import Home from './components/Home.vue';
import ProtectedComponent from './components/ProtectedComponent.vue';

Vue.use(Router);

const router = new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/protected',
      name: 'protected',
      component: ProtectedComponent,
      meta: { requiresAuth: true } // 添加路由守卫需要的元数据
    }
  ]
});

// 路由守卫
router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    // 需要身份验证的路由
    if (!isAuthenticated()) {
      // 用户未登录，重定向到登录页或其他指定组件
      next('/login');
    } else {
      // 用户已登录，允许访问受保护的路由
      next();
    }
  } else {
    // 不需要身份验证的路由
    next();
  }
});

// 身份验证函数
function isAuthenticated() {
  // 进行用户身份验证的逻辑，例如检查本地存储中的登录状态、验证token等
  // 返回true表示已登录，返回false表示未登录
}

export default router;