vue如何获取uri

在Vue中，可以通过以下几种方式来获取URI：1、使用window.location对象，2、使用Vue Router实例，3、使用自定义方法。 这些方法提供了不同的灵活性和功能，具体选择取决于您的应用需求。

一、WINDOW.LOCATION 对象

使用 window.location 对象是最直接的方法，因为它是浏览器的内置对象，可以立即访问当前页面的完整URI。这种方法适用于简单的单页面应用或没有使用Vue Router的项目。

let currentURI = window.location.href;

console.log(currentURI); // 打印出完整的URI

优点:

• 简单直接
• 无需额外安装或配置

缺点:

• 不适用于复杂的路由场景
• 无法轻松获取路由参数或查询字符串

二、VUE ROUTER 实例

对于使用Vue Router的项目，Vue Router实例提供了更强大的功能来管理和获取URI。您可以通过访问this.$route来获取当前路由信息。

export default {

  name: "MyComponent",
  mounted() {
    console.log(this.$route.fullPath); // 打印出完整的URI
    console.log(this.$route.path); // 打印出路径部分
    console.log(this.$route.query); // 打印出查询参数
    console.log(this.$route.params); // 打印出路由参数
  }
};

优点:

• 能够轻松获取路由参数和查询字符串
• 适用于复杂的多页面应用

缺点:

• 需要依赖Vue Router
• 需要在组件内或Vue实例内使用

三、自定义方法

如果您的需求较为特殊或者需要在Vue实例之外获取URI，可以考虑编写自定义方法来实现。这种方法可以结合window.location和其他工具库（如query-string）来解析URI。

import qs from 'query-string';

function getURI() {
  let currentURI = window.location.href;
  let parsedURI = qs.parseUrl(currentURI);
  return {
    fullPath: currentURI,
    path: parsedURI.url,
    query: parsedURI.query
  };
}
// 使用自定义方法
let uriDetails = getURI();
console.log(uriDetails.fullPath); // 打印出完整的URI
console.log(uriDetails.path); // 打印出路径部分
console.log(uriDetails.query); // 打印出查询参数

优点:

• 高度定制化
• 不依赖于Vue Router

缺点:

• 需要额外的解析库（如query-string）
• 需要手动编写和维护解析逻辑

四、实例说明

下面是一个具体的实例，展示了如何在Vue应用中使用上述方法来获取和显示当前的URI。

<template>

  <div>
    <h1>Current URI</h1>
    <p>{{ fullPath }}</p>
    <p>{{ path }}</p>
    <p>{{ query }}</p>
  </div>
</template>
<script>
import qs from 'query-string';
export default {
  data() {
    return {
      fullPath: '',
      path: '',
      query: ''
    };
  },
  mounted() {
    // 使用window.location获取URI
    this.fullPath = window.location.href;
    // 使用Vue Router获取URI
    if (this.$route) {
      this.path = this.$route.path;
      this.query = JSON.stringify(this.$route.query);
    } else {
      // 使用自定义方法获取URI
      let uriDetails = this.getURI();
      this.path = uriDetails.path;
      this.query = JSON.stringify(uriDetails.query);
    }
  },
  methods: {
    getURI() {
      let currentURI = window.location.href;
      let parsedURI = qs.parseUrl(currentURI);
      return {
        fullPath: currentURI,
        path: parsedURI.url,
        query: parsedURI.query
      };
    }
  }
};
</script>

总结

在Vue中获取URI可以通过多种方式实现，主要包括使用window.location对象、Vue Router实例和自定义方法。每种方法都有其优点和缺点，具体选择应根据您的应用需求来决定。对于简单的场景，window.location对象可能已经足够；对于复杂的路由场景，Vue Router实例提供了更强大的功能；而自定义方法则提供了最高的灵活性。

建议根据具体应用场景和复杂度选择合适的获取URI的方法。如果您的应用已经使用了Vue Router，那么优先考虑使用Vue Router实例来获取URI信息。如果没有使用Vue Router，则可以直接使用window.location对象或者自定义方法。

相关问答FAQs：

1. 如何在Vue中获取当前页面的URI？

在Vue中，可以通过使用$route对象来获取当前页面的URI。$route是Vue Router提供的全局对象，它包含了当前路由的一些信息，包括URI。

可以通过$route.path来获取当前页面的URI。例如，如果当前页面的URI为/example，可以通过this.$route.path来获取该值。

export default {
  mounted() {
    console.log(this.$route.path); // 输出："/example"
  }
}

2. 如何在Vue中获取URI的查询参数？

在Vue中，可以使用$route.query来获取URI的查询参数。$route.query是一个对象，包含了URI中的查询参数及其对应的值。

假设当前页面的URI为/example?id=1&name=John，要获取id和name的值，可以通过this.$route.query.id和this.$route.query.name来获取。

export default {
  mounted() {
    console.log(this.$route.query.id); // 输出："1"
    console.log(this.$route.query.name); // 输出："John"
  }
}

3. 如何在Vue中获取URI的动态路由参数？

在Vue中，可以使用$route.params来获取URI的动态路由参数。$route.params是一个对象，包含了URI中的动态路由参数及其对应的值。

假设在路由配置中定义了一个动态路由参数:id，并且当前页面的URI为/example/1，要获取动态路由参数id的值，可以通过this.$route.params.id来获取。

export default {
  mounted() {
    console.log(this.$route.params.id); // 输出："1"
  }
}