未启用 VueJS 路由器配置

Question

在我的 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。

请提供一些调试技巧？

Answer 1

这是由于 mode: 'history'。此处有更多详细信息 - HTML5 History Mode

Since our app is a single page client side app, without a proper server configuration, the users will get a 404 error if they access http://oursite.com/user/id directly in their browser.

To fix the issue, all you need to do is add a simple catch-all fallback route to your server. If the URL doesn't match any static assets, it should serve the same index.html page that your app lives in.

Answer 2

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

未启用 VueJS 路由器配置

VueJS router configuration not enabled

vue.js

vue-router

vuejs-routing