带有 AJAX 调用的 Vue 路由器“保存位置”

在 Vue.js 中，路由器是一个非常强大的工具，它可以帮助我们管理我们的应用程序的导航和浏览历史记录。与此同时，AJAX 是 Web 开发中一个强大的技术，它可以允许我们动态地向服务器请求数据而无需刷新页面。

在这个教程中，我们将学习如何结合使用 Vue.js 路由器和 AJAX 技术来“保存位置”。这意味着当用户离开一个页面并回来时，我们可以恢复他们上次浏览的状态。

准备

在开始之前，我们需要做一些准备工作。我们将使用 Vue.js 库、vue-router 库和 jQuery 库，所以你需要将它们全部包含到你的项目中：

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

另外，我们需要一个后端服务器来提供我们的数据。这个教程中我们将使用一个简单的 express.js 服务器，这个服务器会提供我们的数据 API。你可以使用任何你喜欢的服务器技术。

创建 Vue.js 应用程序

我们将从创建一个 Vue.js 应用程序开始。我们需要一些组件来构建我们的导航，所以我们将创建一个 App.vue 和一个 Home.vue 组件：

<template>
  <div id="app">
    <!-- 导航 -->
    <ul>
      <li>
        <router-link :to="{ path: '/' }">Home</router-link>
      </li>
      <li>
        <router-link :to="{ path: '/about' }">About</router-link>
      </li>
    </ul>

    <!-- 路由出口 -->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "App",
};
</script>

<template>
  <div>
    <h1>Home</h1>
  </div>
</template>

<script>
export default {
  name: "Home",
};
</script>

现在我们已经创建了我们的 Vue.js 应用程序，并在内部创建了一个路由器。

路由器配置

现在我们需要配置路由器，以便我们可以导航到不同的页面，并使用 AJAX 技术从我们的服务器请求数据。我们将使用一个简单的 express.js 服务器来实现这一点，并使用 AJAX 技术从我们的服务器请求数据。

首先，我们创建我们的 express.js 服务器和我们的数据 API：

const express = require("express");
const app = express();

let books = [
  {
    id: 1,
    title: "The Hitchhiker's Guide to the Galaxy",
    author: "Douglas Adams",
    description: "Seconds before the Earth is demolished to make way for a galactic freeway...",
  },
  {
    id: 2,
    title: "Brave New World",
    author: "Aldous Huxley",
    description: "Far in the future, the World Controllers have created the ideal society.",
  },
  {
    id: 3,
    title: "1984",
    author: "George Orwell",
    description: "Winston Smith toes the Party line, rewriting history to satisfy the demands of the Ministry of Truth.",
  },
];

app.get("/api/books", (req, res) => {
  res.json(books);
});

app.listen(3000, () => console.log("Server started"));

下一步，我们需要在我们的 Vue.js 应用程序中配置我们的路由器。我们将使用 vue-router 库来完成这个任务。我们的路由器需要两个路径：/ 路径和 /about 路径。我们将从首页开始，它应该显示我们请求的书籍列表：

import Home from "@/components/Home.vue";
import About from "@/components/About.vue";

const routes = [
  { path: "/", component: Home },
  { path: "/about", component: About },
];

const router = new VueRouter({
  routes,
});

现在我们已经配置了我们的路由器，我们需要让它与我们的应用程序进行绑定。我们在我们的入口点中创建一个新的 Vue 实例，并将我们的路由器与它关联：

import Vue from "vue";
import App from "./App.vue";
import VueRouter from "vue-router";

import Home from "@/components/Home.vue";
import About from "@/components/About.vue";

const routes = [
  { path: "/", component: Home },
  { path: "/about", component: About },
];

const router = new VueRouter({
  routes,
});

Vue.use(VueRouter);

Vue.config.productionTip = false;

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

现在我们已经构建了我们的应用程序框架，并将我们的路由器与它相关联。我们还需要使用 AJAX 技术从我们的服务器请求数据，然后将其保存在我们的状态中。

使用 AJAX 请求数据

在我们的 Home.vue 组件中，我们将使用 AJAX 技术从我们的服务器请求数据。我们将使用 jQuery 库来执行 AJAX 请求。我们将在组件的 created 钩子方法中执行此操作。

<template>
  <div>
    <h1>Home</h1>
    <ul>
      <li v-for="book in books" :key="book.id">
        <h2>{{ book.title }}</h2>
        <p>{{ book.author }}</p>
        <p>{{ book.description }}</p>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {
      books: [],
    };
  },
  created() {
    this.getBooks();
  },
  methods: {
    getBooks() {
      $.get("/api/books", (data) => {
        this.books = data;
      });
    },
  },
};
</script>

现在我们可以使用 AJAX 技术从我们的服务器请求数据，并将其存储在我们的组件状态中。我们还需要将用户的浏览状态保存在我们的状态中。

状态保存

为了保存用户的浏览状态，我们将使用 Vue.js 的状态管理功能。我们将使用 Vuex 库。我们可以在我们的应用程序中创建 store.js 文件，并在文件中配置我们的状态：

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    scrollPositions: {},
  },
  mutations: {
    saveScrollPosition(state, payload) {
      state.scrollPositions[payload.path] = payload.scrollY;
    },
  },
  getters: {
    getScrollPosition: (state) => (path) => {
      return state.scrollPositions[path] || 0;
    },
  },
});

这里我们创建了一个名为 scrollPositions 的对象，它将保存用户在每个 URL 路径下的滚动位置。我们定义了一个 saveScrollPosition 的可变方法来保存滚动位置，并定义了一个 getScrollPosition 的 getter 方法来在用户返回页面时提取滚动位置。

最后，我们需要将我们的 Vuex store 和我们的主 Vue 实例进行关联。

import Vue from "vue";
import App from "./App.vue";
import VueRouter from "vue-router";
import Vuex from "vuex";
import store from "@/store";

import Home from "@/components/Home.vue";
import About from "@/components/About.vue";

const routes = [
  { path: "/", component: Home },
  { path: "/about", component: About },
];

const router = new VueRouter({
  routes,
});

Vue.use(VueRouter);
Vue.use(Vuex);

Vue.config.productionTip = false;

router.beforeEach((to, from, next) => {
  window.scrollTo(0, store.getters.getScrollPosition(to.path));
  next();
});

router.afterEach((to, from) => {
  const scrollY = window.pageYOffset || document.documentElement.scrollTop;
  store.commit("saveScrollPosition", { path: from.path, scrollY });
});

new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount("#app");

在我们的入口点中，我们现在关联了我们的 Vuex store 和我们的主 Vue 实例。我们还定义了 beforeEach 钩子方法和 afterEach 钩子方法，以便我们可以在切换路由之前和之后保存用户的滚动位置。

现在，我们已经完成了我们的 Vue.js 应用程序的配置，我们可以使用 AJAX 技术从我们的服务器请求数据，并将其保存在我们的状态中，并恢复用户的滚动位置。

结论

在本教程中，我们学习了如何使用 AJAX 技术和 Vue.js 路由器来“保存位置”。我们还学习了如何使用 Vuex 状态管理库来保存用户的浏览状态。我们使用一个简单的 express.js 服务器来提供我们的数据服务。

如果您想深入了解 Vue.js 的路由器和 Vuex 状态管理库，请访问官方文档。