#vue.js #vue-router #vuejs-routing
#vue.js #vue-маршрутизатор #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 «Я получаю пустую страницу, так как приложение загружается без каких-либо параметров маршрутизации. Я вижу инструкции console.log(), добавленные в main.js и App.js , но не компонент «PersonDetails».
Я добавил конфигурацию маршрутизатора по умолчанию, и это, похоже, работает.
{
path : '/',
redirect:'/456/123'
}
Эта маршрутизация по умолчанию загружает компонент PersonDetails с параметрами пути, сопоставленными с 456 и 123.
Пожалуйста, дайте несколько советов по отладке этого?
Ответ №1:
Это связано с mode: 'history'
. Более подробная информация здесь — Режим истории HTML5
Поскольку наше приложение представляет собой одностраничное клиентское приложение, без надлежащей конфигурации сервера пользователи получат ошибку 404, если они получат доступ http://oursite.com/user/id прямо в их браузере.
Чтобы устранить проблему, все, что вам нужно сделать, это добавить простой универсальный запасной маршрут на ваш сервер. Если URL-адрес не соответствует каким-либо статическим ресурсам, он должен обслуживать то же самое index.html страница, на которой находится ваше приложение.
Ответ №2:
Вы можете использовать резервный прокси http-server
в качестве универсального перенаправления: npx http-server ./dist -P http://localhost:8080?
Комментарии:
1. Спасибо @RWAM. Это была проблема с конфигурацией на стороне сервера. HTTP-сервер не знал, что нужно сопоставить маршрут » localhost: 8080/1234/56 » с проектом Vue (index.html ). Добавление резервного прокси-сервера к серверу перенаправило его в приложение Ve, после чего vue-router загрузил компонент.