带参数的 vue-router 不能运行部署在 netlify 上

Question

Home.vue

<template>
  <h3>Home</h3>
</template>

Test1.vue

<template>
  <h3>TEst page {{symbol}}</h3>
</template>

<script>
export default {
  data() {
      return {
        symbol: this.$route.params.id
      }
    },
}
</script>

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/test/:id',
      component: Test1
    },
    {
      path: '/home',
      component: Home
    },
  ]
})

我无法通过网站 [netlifylink/test/1] 拨打电话。这是“找不到页面看起来您已经关注了损坏的 link 或输入了此站点上不存在的 URL。

但仍然可以访问localhost:8080/test/1

我打电话给 localhost:8080/home 并且 [netlifylink/home] 正在工作。为什么？

帮我 please.Sorry 语法。

Answer 1

Netlify 上有针对 SPA 的特殊部署说明。在此页面上：https://www.netlify.com/docs/redirects/ 如果您转到 History Pushstate 和单页应用程序 部分，您将看到：

If you’re developing a single page app and want history pushstate to work so you get clean URLs, you’ll want to enable the following rewrite rule:

/* /index.html 200

This will effectively serve the index.html instead of giving a 404 no matter what URL the browser requests.

您需要将其添加到您构建站点根目录下的 _redirects 文件中。

Answer 2

它也在 Vue 文档部署部分

https://cli.vuejs.org/guide/deployment.html#netlify

为了在 Vue Router 上使用 history mode 接收直接点击，您需要在 /public 下创建一个名为 _redirects 的文件，其中包含以下内容：

# Netlify settings for single-page application
/*    /index.html   200

Answer 3

在项目的根目录中创建一个名为 netlify.toml 的文件，然后粘贴：

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

带参数的 vue-router 不能运行部署在 netlify 上

vue-router with parameter can't run deploy on netlify

javascript

vue.js

vue-router

netlify

vuetify.js

带参数的 vue-router 不能 运行 部署在 netlify 上

vue-router with parameter can't run deploy on netlify

javascript

vue.js

vue-router

netlify

vuetify.js

带参数的 vue-router 不能运行部署在 netlify 上