Блог

В моем проекте 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 «Я получаю пустую страницу, так как приложение загружается без каких-либо параметров маршрутизации. Я вижу инструкции console.log(), добавленные в main.js и App.js , но не компонент «PersonDetails».

Я добавил конфигурацию маршрутизатора по умолчанию, и это, похоже, работает.

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

Эта маршрутизация по умолчанию загружает компонент PersonDetails с параметрами пути, сопоставленными с 456 и 123.

Пожалуйста, дайте несколько советов по отладке этого?

Это связано с mode: 'history' . Более подробная информация здесь — Режим истории HTML5

Поскольку наше приложение представляет собой одностраничное клиентское приложение, без надлежащей конфигурации сервера пользователи получат ошибку 404, если они получат доступ http://oursite.com/user/id прямо в их браузере.

Чтобы устранить проблему, все, что вам нужно сделать, это добавить простой универсальный запасной маршрут на ваш сервер. Если URL-адрес не соответствует каким-либо статическим ресурсам, он должен обслуживать то же самое index.html страница, на которой находится ваше приложение.

Вы можете использовать резервный прокси http-server в качестве универсального перенаправления: npx http-server ./dist -P http://localhost:8080?