如何从商店 vue 访问路由器 - JavaScript

如果你正在使用 Vue，你肯定已经接触到了Vue Router。Vue Router 是 Vue.js 的官方路由管理工具，它可以让你构建单页面应用（SPA）非常容易，每个页面可以有自己的 URL，实现组件之间的过渡和更新。 在本文中，我们将讨论如何从Vue组件中访问路由器。

在 Vue 组件中访问路由器

要从Vue组件中访问Vue Router，你需要通过引入它来安装它。你可以使用Vue CLI来创建Vue应用程序并自动安装Vue Router。在你的Vue组件中，你可以通过引用 $router 访问路由器实例。然后，就可以使用 $router 对象的方法和属性来访问当前页面的路由信息。例如，你可以在组件方法中使用 $router.push('/new-route')，以便在应用程序中导航到另一个页面。

以下是访问Vue路由器的示例组件代码：

<template>
  <div>
    <p>Current route: {{ $route.path }}</p>
    <button @click="navigateTo('/new-route')">Navigate to new route</button>
  </div>
</template>

<script>
export default {
  methods: {
    navigateTo(path) {
      this.$router.push(path);
    }
  }
};
</script>

在这个例子中，我们使用 $route 属性来访问当前页面的路由信息。我们还创建了一个方法 navigateTo，它使用 $router.push 方法从当前页面导航到另一个页面。

在 Vue Store 中访问路由器

如果你正在使用 Vuex 来管理应用程序状态，你可能想在 Vuex 存储中访问 Vue 路由器。为了访问路由器，你可以使用 Vue.router 对象，并将其导入到你的 Vuex 存储中。在你的 Vuex 存储中，你可以使用 $router 对象来访问当前页面的路由信息。

以下是访问路由器的示例代码：

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    currentRoute: '/'
  },
  mutations: {
    updateCurrentRoute(state) {
      state.currentRoute = Vue.router.currentRoute.path;
    }
  },
  actions: {
    updateCurrentRoute(context) {
      context.commit('updateCurrentRoute');
    }
  }
});

在这个例子中，我们使用 Vue.router 对象来访问 currentRoute 属性，并使用 $router.currentRoute.path 获取当前路由的路径。

总结

访问Vue路由器对于构建单页面应用程序（SPA）非常重要。 在 Vue 组件和 Vuex 存储中，你可以使用 $router 对象来访问当前页面的路由信息。在 Vuex 存储中，你可以使用 Vue.router 对象。 大多数情况下，你可以将 $router 对象作为一个属性传递给你的组件，并使用 $router.push 方法导航到另一个页面。如果在Vuex存储中，你可以使用 Vue.router.currentRoute.path 属性来获取当前路由的路径。

以上就是从商店 Vue 访问路由器的介绍。如果您还想了解更多关于 Vue 和 Vue Router 的信息，请查阅官方文档。