Vue.js 是当前非常流行的前端框架之一，它通过提供一个响应式和组件化的开发模式，让开发者能更加高效地构建现代化的Web应用。在Vue应用中，获取当前页面的路径是一个常见需求，通常用于路由守卫、数据获取或状态管理等方面。以下是几种在Vue中获取路径的方法。
使用 Vue Router
如果你的Vue应用使用了Vue Router（大多数情况下是这样），你可以通过以下几种方式获取当前路径。
1. 在组件内部使用 `$route`
在Vue组件中，你可以通过 `$route` 对象访问当前路由的信息，其中包含了当前路径（`path`）和其他一些有用的信息。
export default {
created() {
// 访问当前路径
const currentPath = this.$route.path;
console.log(currentPath);
}
}
2. 在导航守卫中使用 `to` 和 `from`
在路由的导航守卫中，你可以通过 `to` 和 `from` 参数来获取即将进入的目标路由和当前路由的信息。
router.beforeEach((to, from, next) => {
// 当前路径
console.log(from.path);
// 目标路径
console.log(to.path);
next();
});
不依赖 Vue Router
如果你的应用没有使用Vue Router，或者你需要在应用的其他上下文中获取路径，你可以使用以下原生JavaScript方法。
1. 使用 `window.location`
你可以通过 `window.location` 对象访问当前页面的URL信息。
// 获取当前完整路径
const currentFullPath = window.location.href;
// 获取当前路径（不含域名和查询参数）
const currentPathname = window.location.pathname;
console.log(currentFullPath); // 例如 "http://example.com/current-path"
console.log(currentPathname); // 例如 "/current-path"
2. 使用 `document.location`
`document.location` 与 `window.location` 是相同的对象，你可以使用它来获取同样的信息。
const currentPath = document.location.pathname;
console.log(currentPath);
注意事项
- 获取路径通常与用户导航相关，注意使用场景是否需要考虑路由守卫或生命周期钩子。
- 如果路径中包含查询参数或哈希，需要根据需求决定是否保留这些部分。
- 在单页面应用（SPA）中，路径变化不会导致页面刷新，这时使用Vue Router来获取路径是最为合适的。
通过以上方法，你可以在不同的场景下灵活地获取Vue应用中的当前路径。