Vue 如何获取 URI

在 Vue 开发中，获取 URI（统一资源标识符）是一个常见的需求。无论是进行路由导航、数据请求还是实现特定的业务逻辑，准确获取 URI 都至关重要。本文将详细介绍在 Vue 项目中获取 URI 的几种常见方法。

使用 Vue Router 获取 URI

Vue Router 是 Vue.js 官方的路由管理器，它为我们提供了便捷的方式来获取当前页面的 URI 信息。确保项目中已经正确安装并配置了 Vue Router。

在组件中，可以通过 this.$route 来访问当前路由的信息，其中 this.$route.path 就代表了当前页面的路径部分，也就是 URI 的一部分。例如：

<template>
  <div>
    <p>当前页面的 URI 路径: {{ currentPath }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPath: ''
    };
  },
  mounted() {
    this.currentPath = this.$route.path;
  }
};
</script>

如果需要获取完整的 URI，包括协议、域名等，可以结合 window.location 对象。例如：

const fullURI = window.location.protocol + '//' + window.location.host + this.$route.path;

在生命周期钩子函数中获取

Vue 组件的生命周期钩子函数为我们提供了在不同阶段获取 URI 的机会。比如在 created 钩子函数中获取：

export default {
  created() {
    const uri = window.location.href;
    console.log('组件创建时的 URI:', uri);
  }
};

而 mounted 钩子函数在组件挂载到 DOM 后执行，同样可以获取 URI：

export default {
  mounted() {
    const path = this.$route.path;
    console.log('组件挂载后的 URI 路径:', path);
  }
};

全局方法获取

可以在 Vue 实例中定义一个全局方法来获取 URI，这样在项目的任何组件中都可以方便地调用。在 main.js 中：

import Vue from 'vue';
import App from './App.vue';

Vue.prototype.getURI = function() {
  return window.location.href;
};

new Vue({
  render: h => h(App)
}).$mount('#app');

然后在组件中使用：

<template>
  <div>
    <button @click="getCurrentURI">获取当前 URI</button>
  </div>
</template>

<script>
export default {
  methods: {
    getCurrentURI() {
      const uri = this.getURI();
      console.log('通过全局方法获取的 URI:', uri);
    }
  }
};
</script>

通过上述方法，在 Vue 项目中获取 URI 变得轻松而高效，开发者可以根据具体的业务需求选择合适的方式来获取所需的 URI 信息。