javascript - 如何通过 Flask 重定向到 Vue-app 的特定页面

Question

我正在构建一个具有以“@”结尾的页面的应用程序，它为没有“@”的页面提供了一些元信息，例如，如果页面“/user/aabb”有关于用户“aabb”的信息，那么page '/user/aabb@' 是该用户的元页面。

问题是，'/aabb' 部分并不真正存在，因为该应用程序是 SPA。'aabb' 只是作为 '/user' 路由中使用的组件的道具交付。我也不能在同一上下文中直接访问'/user/aabb@'。

那么 Flask 有没有办法渲染 Vue 构建应用程序的特定页面？因此，如果用户在地址栏上输入“/user/aabb”，它会链接到带有“aabb”属性的“/user”页面。如果有，我想应该需要以下功能。

1. Flask 重定向到 Vue-route 内的特定页面。
2. Flask 将数据发送到该页面的 vue 组件。
3. Vue 从 Flask 接收数据。

或者有没有其他方法可以解决这个......问题？

提前致谢。

标签： javascriptvue.jsflaskvue-router

Answer 1

您所有问题的解决方案是使用带有HTML5 History Mode的Vue Router。

正如我在上一个问题中提到的，将 Flask 应用程序设置为使用 Vue SPA 作为前端

@app.route('/', defaults={'path': ''})
@app.route('/<path:path>')
def catch_all(path):
    return app.send_static_file("index.html")

然后为您的前端 URL 设置一个路由器

// router.js
import Router from "vue-router"
import Vue from "vue"

Vue.use(Router)

export default new Router({
  base: "/", // this should match the root path for your app
  mode: "history",
  routes: [{
    name: "UserMeta",
    path: "/user/:username@",
    component: () => import("./path/to/UserMeta.vue"),
    props: true
  }, {
    name: "User",
    path: "/user/:username",
    component: () => import("./path/to/User.vue"),
    props: true
  }]
})

您必须将 -@后缀的元路由列在普通页面之前，以保证它不会认为用户名以@. 请参阅匹配优先级。

在上面的示例中，两个组件都将username路由参数作为道具接收。

然后，您可以在加载路由时使用其中一种数据获取方法将数据从 Flask API 加载到组件中。

例如，使用Fetching After Navigation并假设您有一个 Flask 应用程序路由/api/user/<username>...

<template>
  <div>
    <div v-if="user">
      <!-- show user details here -->
    </div>
    <div v-else>Loading...</div>
  <//div>
</template>
<script>
export default {
  name: "User",
  props: { username: String },
  data: () => ({ user: null }),
  async created () {
    const res = await fetch(`/api/user/${encodeURIComponent(this.username)}`)
    this.user = await res.json()
  }
}
</script>