VueJS路由器配置未启用

Question

在我的VueJS项目中，我在一个文件中配置了路由"js"；。

import VueRouter from 'vue-router'
import personDetails from './components/component.vue'
Vue.use(VueRouter)
export default new VueRouter({
    mode : 'history',
    base : '/',
    routes : [
        {
            path : '/:group/:id',
            name : 'personDetails',
            component : personDetails ,
            props : true
        }
    ]
})

在main.js文件中，我启用了如下路由配置：

import App from './App.vue'
import router from './router'
new Vue({
  router,
  el : '#app',
 components : { App }
 }).$mount('#app')

这是我的App.js文件：

<template>
  <div id="app">
    <router-view v-bind="$props" />
  </div>
</template>
<script>
export default {
  name: 'App',
  props : ['group', 'id'],
  mounted() {
    console.log('Mounted App')    
  }
}    
</script>

我通过运行"；vue-cli服务构建"以及"；npxhttp服务器/dist"；命令。

我注意到，当我这样调用配置好的路由器时；http://localhost:8080/1234/56"，我得到一个404错误。然而，当我调用默认URL"时；http://localhost:8080"我得到一个空白页面，因为加载应用程序时没有任何路由参数。我可以看到console.log((语句添加到main.js和App.js中，但没有看到"personDetails"；组成部分

我添加了一个默认的路由器配置，这似乎是有效的。

{
   path : '/',
   redirect:'/456/123'
}

此默认路由加载具有映射到456和123的路径参数的"personDetails"组件。

请给出一些调试技巧？

Answer 1

这是由于mode: 'history'。点击此处查看更多详细信息-HTML5历史模式

由于我们的应用程序是一个单页客户端应用程序，没有适当的服务器配置，如果用户访问http://oursite.com/user/id直接在他们的浏览器中。

要解决这个问题，您所需要做的就是添加一个简单的catch-all到服务器的回退路由。如果URL与任何静态不匹配资产，它应该为你的应用程序提供相同的index.html页面in.

Answer 2

您可以使用http-server的回退代理作为catch-all重定向：npx http-server ./dist -P http://localhost:8080?