Vue 获取当前页面URL和进行页面重定向

一、背景与问题

在Vue开发中，URL处理是核心功能之一。无论是单页应用（SPA）的路由管理、权限控制、页面跳转，还是需要获取当前页面的URL进行数据校验，都需要深入理解URL的结构和重定向机制。

常见问题包括：

• 如何获取完整的URL（包括协议、域名、路径等）
• 如何进行页面重定向（跳转到其他页面/外部链接）
• 如何处理URL参数（查询参数、片段标识符）
• 如何避免重定向带来的安全风险
• 如何在不同路由模式（hash/history）下保持一致性

二、基本原理

1. URL结构解析

URL由以下部分组成：

http://example.com/path?query=1#fragment
|------------------| |--------| |--------|
   协议/域名      |  路径    | 查询参数 | 片段标识符

Vue中可以通过：

• window.location 获取完整URL
• this.$router.currentRoute 获取当前路由对象
• this.$router.push/replace 进行导航

2. 重定向机制

Vue Router采用两种主要方式：

1. 原生JavaScript跳转（window.location）
2. Vue Router API（push/replace）

三、环境准备

npm install vue-router@4

四、核心实现

1. 获取当前URL的完整信息

// 在组件中获取当前URL
mounted() {
  console.log('完整URL:', window.location.href);
  console.log('协议:', window.location.protocol);
  console.log('域名:', window.location.hostname);
  console.log('路径:', window.location.pathname);
  console.log('查询参数:', window.location.search);
  console.log('片段标识符:', window.location.hash);
}

注意：window.location 是浏览器原生对象，适用于任何场景，但无法在服务端渲染（SSR）中使用。

2. 使用Vue Router获取当前路由

// 在组件中获取当前路由信息
import { useRoute } from 'vue-router';

export default {
  setup() {
    const route = useRoute();
    
    console.log('当前路径:', route.path);
    console.log('当前参数:', route.params);
    console.log('当前查询:', route.query);
    console.log('当前碎片:', route.hash);
    
    return { route };
  }
}

3. 页面重定向实现方式对比

方式一：原生跳转

// 直接跳转到新URL
window.location.href = '/new-page';

// 替换当前历史记录
window.location.replace('/new-page');

方式二：Vue Router API

// 常见用法
this.$router.push('/new-page');
this.$router.replace('/new-page');

// 带参数跳转
this.$router.push({
  name: 'user',
  params: { id: 123 },
  query: { tab: 'profile' }
});

方式三：带状态的重定向

// 带状态跳转
this.$router.push({
  path: '/new-page',
  state: {
    from: 'home',
    timestamp: Date.now()
  }
});

五、完整案例

案例：用户登录后根据角色跳转

<template>
  <div>
    <button @click="login">登录</button>
  </div>
</template>

<script>
export default {
  methods: {
    async login() {
      try {
        // 模拟登录请求
        const response = await fetch('/api/login', { method: 'POST' });
        const data = await response.json();
        
        if (data.success) {
          // 根据角色跳转
          if (data.user.role === 'admin') {
            this.$router.push('/admin/dashboard');
          } else {
            this.$router.push('/user/dashboard');
          }
        }
      } catch (error) {
        console.error('登录失败:', error);
        this.$router.push('/login-error');
      }
    }
  }
}
</script>

处理错误情况的完整案例

<template>
  <div>
    <button @click="redirectToExternal">跳转外部链接</button>
  </div>
</template>

<script>
export default {
  methods: {
    redirectToExternal() {
      // 安全跳转外部链接
      const safeUrl = 'https://example.com';
      
      // 验证URL合法性
      if (this.isSafeUrl(safeUrl)) {
        window.location.href = safeUrl;
      } else {
        this.$router.push('/error');
      }
    },
    
    isSafeUrl(url) {
      try {
        const parsed = new URL(url);
        return parsed.protocol === 'http:' || parsed.protocol === 'https:';
      } catch (e) {
        return false;
      }
    }
  }
}
</script>

六、源码解析

1. Vue Router的push方法实现原理

// vue-router源码片段（简化版）
push(to) {
  if (typeof to === 'string') {
    to = { path: to };
  }
  
  // 处理参数
  const resolved = this.resolve(to);
  
  // 添加历史记录
  this.history.push(resolved);
  
  // 触发导航守卫
  this.beforeEach((to, from, next) => {
    next();
  });
}

2. URL解析过程

// URL解析示例
function parseUrl(url) {
  const parsed = new URL(url, window.location.origin);
  return {
    protocol: parsed.protocol,
    hostname: parsed.hostname,
    pathname: parsed.pathname,
    search: parsed.search,
    hash: parsed.hash
  };
}

七、进阶使用

1. 动态路由处理

// 基于URL参数的重定向
this.$router.push({
  path: `/dashboard/${userId}`,
  query: { tab: 'settings' }
});

2. 路由守卫控制重定向

// 全局前置守卫
router.beforeEach((to, from, next) => {
  if (to.path === '/secure') {
    if (localStorage.getItem('auth') === 'true') {
      next();
    } else {
      next('/login');
    }
  } else {
    next();
  }
});

3. 历史模式与hash模式对比

八、性能与工程实践

1. 性能优化建议

• 避免频繁使用window.location导致页面刷新
• 使用Vue Router的push/replace保持SPA特性
• 对敏感操作添加防抖/节流
• 使用keep-alive缓存组件状态

2. 安全注意事项

开放重定向漏洞：

// 危险示例
router.push(window.location.hash);

安全处理方式：

// 安全处理
const safeUrl = 'https://example.com';
router.push(safeUrl);

3. 异常处理建议

try {
  this.$router.push('/error');
} catch (error) {
  console.error('导航失败:', error);
}

九、常见问题与踩坑

1. 常见错误示例

// 错误：直接拼接URL
const url = 'https://' + window.location.hostname + '/new-page';
window.location.href = url;

问题：可能导致安全漏洞，如CSRF攻击

改进：

// 安全处理
const safeUrl = 'https://example.com/new-page';
window.location.href = safeUrl;

2. 常见问题分析

十、最佳实践

1. 推荐方案

• 使用Vue Router API进行导航
• 在需要时才使用window.location
• 对外部链接进行严格校验
• 在SSR场景下使用window.location前确保客户端渲染完成
• 对敏感操作添加防抖/节流

2. 推荐代码结构

// 路由配置文件
import { createRouter, createWebHistory } from 'vue-router';

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About }
  ]
});

export default router;

十一、总结

Vue中处理URL和重定向需要综合考虑多种场景。通过深入理解URL结构、合理使用Vue Router API、注意安全风险和性能优化，可以构建更健壮的页面导航系统。在实际开发中，应根据具体需求选择合适的方案，避免直接使用window.location导致的页面刷新问题，同时注意处理路由守卫、参数传递等细节。对于涉及安全性的场景，必须严格校验URL合法性，防止开放重定向等安全漏洞。