带有参数的 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
    },
  ]
})

I can't call through the website [netlifylink/test/1]. It's "Page Not Found Looks like you've followed a broken link or entered a URL that doesn't exist on this site".

But can still access localhost:8080/test/1

i call localhost:8080/home and [netlifylink/home] is work. why?

help me please.Sorry for grammar.

Answer 1

It's also in the Vue documentation deployment section

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

In order to receive direct hits using history mode on Vue Router, you need to create a file called _redirects under /public with the following content:

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

Answer 2

There are special deploy instructions for SPAs on Netlify. On this page: https://www.netlify.com/docs/redirects/ if you go to the History Pushstate and Single Page Apps section you will see this:

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.

You need to add this to the _redirects file under the root of your built site.

Answer 3

create a file called netlify.toml in the root of your project and then paste this:

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