vue拦截器获取当前页面url及参数

项目里做权限控制或者埋点统计，截器l及经常要在路由跳转前拿到目标页面的当前完整 URL 和参数。Vue Router 的页面拦截器里，to 对象其实已经把东西都给你了，参数只是截器l及很多人没仔细翻。

假设你有一个路由跳转，当前地址是页面 /order/detail?id=1024&from=push。在 router.beforeEach 里写一行 console.log(to)，参数展开看 fullPath，截器l及结果就是当前 /order/detail?id=1024&from=push。这就是页面当前要去的完整路径，带查询参数。参数直接用 to.fullPath 就行，截器l及不用自己拼 path 和 query。当前

但有个细节容易踩坑。页面to.fullPath 拿到的是编码后的字符串，如果参数里有中文或者特殊字符，比如 ?keyword=测试，你会看到 %E6%B5%8B%E8%AF%95。想拿原始值，得用 to.query.keyword，Vue Router 已经帮你解码好了。我一般习惯 fullPath 用来做日志上报，query 用来做业务判断，各取所需。

路径参数是另一回事。路由定义成 /user/:id，访问 /user/42，to.params.id 就是 "42"。注意是字符串，不是数字。有次我拿它直接跟后端返回的数字 ID 做 === 比较，怎么都不相等，查了半天才发现类型问题。后来统一用 Number(to.params.id) 转一下，省心。

查询参数和路径参数可以同时存在。/user/42?tab=orders&page=2，to.params.id 是 "42"，to.query.tab 是 "orders"，to.query.page 是 "2"。三个来源互不干扰，fullPath 则把它们拼在一起。我见过有人在拦截器里手动 path + '?' + qs.stringify(query)，其实没必要，fullPath 就是干这个的。

如果参数是数组呢？比如 ?ids=1&ids=2&ids=3。Vue Router 解析后 to.query.ids 是 ['1','2','3']。但如果你在地址栏写 ?ids=1,2,3，它就是一个字符串 "1,2,3"。两种写法结果不一样，拦截器里做判断时得留个心眼。我一般会写个工具函数统一处理，数组就遍历，字符串就 split(',')。

哈希模式下的情况稍微不同。URL 长这样：http://localhost:8080/#/order/detail?id=1024。在拦截器里 to.fullPath 依然返回 /order/detail?id=1024，不会带 #。但如果你要拿浏览器地址栏的原始 URL，得用 window.location.href，那才会包含 # 和前面的域名端口。两者用途不同：to.fullPath 是路由层面的路径，window.location.href 是浏览器层面的完整地址。做重定向或者分享链接时，通常用前者就够了。

拦截器里还能拿到 from，也就是来源页面的信息。结构跟 to 一模一样。from.fullPath、from.query、from.params 都能用。有次做页面停留时长统计，就是在 beforeEach 里记录 from.fullPath 和时间戳，在 afterEach 里再算差值。简单直接。

还有个场景：需要判断当前页面是不是从某个特定页面跳过来的。比如从支付成功页返回订单列表，要刷新数据。可以在拦截器里比较 from.path 和 to.path。path 不带查询参数，fullPath 带。比较路径用 path，比较完整地址用 fullPath。别搞混了。

最后提一个实际项目里的写法。我通常会在 router.beforeEach 里这样取数据：

router.beforeEach((to, from, next) => {  const url = to.fullPath const {  id, tab } = to.params const {  keyword, page } = to.query // 埋点上报、权限校验、页面标题设置... next() })

就这么几行，该有的都有了。不用去碰 window.location，也不用自己解析字符串。Vue Router 已经把 URL 拆得明明白白，直接拿就行。