未启用 VueJS 路由器配置答案

【问题标题】：VueJS router configuration not enabled未启用 VueJS 路由器配置
【发布时间】：2021-02-09 07:38:57
【问题描述】：

在我的 VueJS 项目中，我在文件“router.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-service build”和“npx http-server ./dist”命令来运行项目。

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

我添加了一个默认路由器配置，这似乎可以正常工作。

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

此默认路由加载 'personDetails' 组件，其路径参数映射到 456 和 123。

请给出一些调试提示？

【问题讨论】：

标签： vue.js vue-router vuejs-routing

【解决方案1】：

这是由于mode: 'history'。更多细节在这里 - HTML5 History Mode

由于我们的应用是单页客户端应用，没有适当的服务器配置，用户访问会报404错误 http://oursite.com/user/id 直接在他们的浏览器中。

要解决此问题，您只需添加一个简单的包罗万象到您的服务器的后备路由。如果 URL 不匹配任何静态资产，它应该提供与您的应用程序相同的 index.html 页面在。

【讨论】：

【解决方案2】：

您可以将http-server 的后备代理用作catch-all redirect：npx http-server ./dist -P http://localhost:8080?

【讨论】：

感谢@RWAM。这是一个服务器端配置问题。 http-server 不知道将路由“localhost:8080/1234/56”映射到 Vue 项目（index.html）。将回退代理添加到服务器将其路由到 Ve 应用程序，然后 vue-router 加载该组件。