Vue Router 小技巧：获取当前地址详细信息

尽兴-

于 2024-08-29 09:44:20 发布

阅读量1.2k

点赞数 9

分类专栏：前端文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_47905795/article/details/141667785

版权

前端专栏收录该内容

14 篇文章 0 订阅

订阅专栏

Vue Router 提供的 $route 对象

计算属性 mainContainClass 和 mainContainStyle：

watch 监听 $route 变化：

总结

引言

在使用 Vue.js 开发单页应用时，Vue Router 是一个非常重要的工具。它不仅允许我们定义和管理应用的路由，还提供了一些方便的方法来获取当前地址的详细信息。在这篇博客中，我们将探讨如何使用 Vue Router 获取当前地址的各个部分，并重点讲述 this.$route.hash 和 this.$route.path 之间的区别。

Vue Router 提供的 `$route` 对象

Vue Router 在我们的 Vue 组件中注入了一个 $route 对象，该对象包含了当前路由的信息。以下是 $route 对象的一些常用属性：

假设我们有这样一个地址:

127.0.0.1:8080/abcd/TestPage?foo=bar#PLAY

path: 当前路由的路径，例如 /abcd/TestPage。
hash: 当前路由的 hash 部分，例如 #PLAY。
query: 当前路由的查询参数，一个对象，包含 URL 中 ? 之后的参数。
params: 动态路由的参数，一个对象，包含路由中定义的动态参数。
fullPath: 完整的路径，包括 query 和 hash，例如 /abcd/TestPage?foo=bar#PLAY。

获取当前地址的路径和 hash

在很多情况下，我们需要根据当前地址的某一部分来执行特定的逻辑。以下是如何使用 this.$route.path 和 this.$route.hash 来获取当前地址的路径和 hash。

this.$route.path

this.$route.path 返回的是当前路由的路径部分，不包含查询参数 query 和 hash。

例如，对于 URL https://example.com/abcd/TestPage?foo=bar#PLAY，

this.$route.path 返回 /abcd/TestPage。

this.$route.hash

this.$route.hash 返回的是当前 URL 的 hash 部分，包括 # 字符。

例如，对于 URL https://example.com/abcd/TestPage?foo=bar#PLAY，

this.$route.hash 返回 #PLAY。

实际案例：根据 hash 更新样式

下面是一个实际的示例，展示了如何根据 URL 中的 hash 部分来动态更新组件的样式。

示例代码

<temPLAYe>
  <div :class="mainContainClass" :style="mainContainStyle" id="main-contain">
    <transition name="page-transition">
      <keep-alive v-if="isRouteAlive">
        <router-view />
      </keep-alive>
    </transition>
  </div>
</temPLAYe>

<script>
export default {
  data() {
    return {
      isRouteAlive: true
    };
  },
  computed: {
    // 动态计算类名
    mainContainClass() {
      if (this.$route.hash.includes('#PLAY')) {
        return 'class-for-PLAY';
      } else if (this.$route.hash.includes('#OTHER')) {
        return 'class-for-other';
      } else {
        return 'default-class';
      }
    },
    // 动态计算样式
    mainContainStyle() {
      if (this.$route.hash.includes('#PLAY')) {
        return { backgroundColor: 'red' };
      } else if (this.$route.hash.includes('#OTHER')) {
        return { backgroundColor: 'blue' };
      } else {
        return { backgroundColor: 'white' };
      }
    }
  },
  watch: {
    // 监听路由变化，可以执行额外的逻辑
    $route(to, from) {
      console.log('Route changed from', from.fullPath, 'to', to.fullPath);
      console.log('Hash changed to', to.hash);
    }
  }
};
</script>

<style>
/* 定义不同的class样式 */
.class-for-PLAY {
  padding: 20px;
  border: 2px solid red;
}

.class-for-other {
  padding: 20px;
  border: 2px solid blue;
}

.default-class {
  padding: 20px;
  border: 2px solid black;
}
</style>

解释

动态绑定 class 和 style：

使用 :class="mainContainClass" 和 :style="mainContainStyle" 动态绑定类和样式，这些属性会根据 URL 中的 hash 部分进行判断。

计算属性 mainContainClass 和 mainContainStyle：

mainContainClass 和 mainContainStyle 使用 $route.hash 来获取 URL 中的 hash 部分进行判断。
如果 hash 部分包含 #PLAY，则返回相应的类名和样式；

如果包含其他关键字（例如 #OTHER），则返回相应的类名和样式；

否则返回默认的类名和样式。