未启用VueJS路由器配置

问题描述

在我的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'
}

此默认路由使用映射到456和123的路径参数加载“ personDetails”组件。

请提供一些调试技巧？

解决方法

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

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

要解决此问题，您需要做的就是添加一个简单的包罗万象 备用路由到您的服务器。如果网址与任何静态网址都不匹配 资产，它应与您的应用程序所在的index.html页面相同 内。

,

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