在Vue.js中,获取当前页面的URI(Uniform Resource Identifier,统一资源标识符)是一项常见的需求。这通常涉及到获取路由信息或查询字符串参数。下面将详细介绍在Vue应用中获取URI的几种方法。
使用Vue Router获取路径信息
如果你的Vue应用使用了Vue Router,那么你可以很容易地通过路由对象获取当前路径信息。
获取当前路由的路径:
// 在组件内
export default {
mounted() {
const currentPath = this.$route.path;
console.log(currentPath); // 输出当前路由的路径(不包含查询参数)
}
}
获取当前路由的完整URI:
// 在组件内
export default {
mounted() {
const currentFullUri = this.$route.fullPath;
console.log(currentFullUri); // 输出包含查询参数的完整路径
}
}
使用JavaScript获取当前页面的完整URI
如果不使用Vue Router,或者需要获取整个URL(包括协议、域名等),你可以使用JavaScript的内置对象`window.location`。
// 获取当前页面的完整URI
const currentFullUri = window.location.href;
console.log(currentFullUri); // 输出当前页面的完整URI,包括协议、域名、路径和查询参数
获取查询字符串参数
查询字符串参数通常用于GET请求中,你可以使用`window.location.search`或者Vue Router提供的`$route.query`来获取。
使用JavaScript获取查询字符串:
// 获取查询字符串
const searchParams = window.location.search;
// 使用URLSearchParams API解析查询字符串
const urlParams = new URLSearchParams(searchParams);
const myParam = urlParams.get('myParam'); // 获取名为'myParam'的查询参数值
使用Vue Router获取查询参数:
// 在组件内
export default {
mounted() {
const myParam = this.$route.query.myParam; // 获取路由查询参数'myParam'
console.log(myParam);
}
}
总结
在Vue应用中获取URI,你可以根据需要选择不同的方法:
1. 如果只需要获取当前路由的路径或完整路径,使用Vue Router提供的`$route.path`或`$route.fullPath`。
2. 如果需要获取整个页面的完整URI,包括协议和域名,可以使用`window.location.href`。
3. 对于查询字符串参数,你可以使用`window.location.search`结合`URLSearchParams`,或者直接使用Vue Router的`$route.query`。
根据你的具体需求,这些方法可以帮助你方便地获取到当前页面的URI信息。