Обновление страницы Vue-router или доступ к URL - PullRequest
0 голосов
/ 14 сентября 2018

У меня есть целевая страница с регистрацией / логином, которая перенаправляет на главную страницу с контентом. После успешного входа я перенаправляю вот так:

this.$router.push({ name: 'main' })

И это работает, но если я обновляю страницу или пытаюсь получить к ней доступ по URL, например, как http://testapp.test/main, я получаю сообщение об ошибке: Страница не существует 404. В настоящее время у меня нет никакой защиты от доступа к страницам, предназначенным только для зарегистрированных пользователей. Я также добавил путь «*» в маршрутизаторе для неопределенных маршрутов, а также просто выдает 404 вместо загрузки домашней страницы. Вот мои настройки роутера:

import Vue from 'vue'
import VueRouter from 'vue-router'
import BootstrapVue from 'bootstrap-vue'
import {store} from './store/store'

Vue.use(BootstrapVue);
Vue.use(VueRouter);

window.Vue = require('vue');


import Home from './components/LandingPage.vue'
import Main from './components/MainPage.vue'
import Logout from './components/Logout.vue'

const router = new VueRouter({
    mode: 'history',
    routes: [
        {
            path: '/',
            name: 'home',
            component: Home,
        },
        {
            path: '/main',
            name: 'main',
            component: Main,
        },
        {
            path: '/logout',
            name: 'logout',
            component: Logout,
        },
        {
            path :'*',
            name: 'home',
            component: Home,
        }
    ],
});


const app = new Vue({
    el: '#app',
    components: { Home, Main, Logout },
    router,
    store,
});

Я пытался с https://router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations, но я не уверен, правильно ли я это сделал. Я скопировал код для настройки apache и заменил им существующий код в .htaccess. Но тогда даже маршрут от входа в систему перестает работать, и если я обращаюсь к / main, это дает мне ошибку 404.

Ответы [ 2 ]

0 голосов
/ 17 сентября 2018

Я решил это с добавлением

Route::get('/{vue_capture?}', function () { return view('welcome'); })->where('vue_capture', '[\/\w\.-]*');

в файл web.php

0 голосов
/ 14 сентября 2018

Для этого вам также необходимо выполнить настройку на стороне сервера. В качестве альтернативы вы можете попробовать другие режимы маршрутизатора?как "хэш"

Вот документация для режима и конфигурации сервера.

https://router.vuejs.org/api/#mode

https://router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations

...