Перенаправить на страницу 404 без изменения URL в Vue. js - PullRequest
Новая
       16

Перенаправить на страницу 404 без изменения URL в Vue. js

0 голосов
/ 04 марта 2020

В моем проекте Vue. js я хочу отобразить страницу 404, если параметр маршрута недопустим. Сейчас я использую следующий код для этого: 

this.$router.replace({ path: '/404' });

Есть ли способ сделать это без изменения URL? Я хочу, чтобы пользователь все еще мог копировать исходную строку URL браузера. Есть ли какой-то параметр silent: true?

Ответы [ 3 ]

1 голос
/ 04 марта 2020

При vue-router URL является источником правды. Если URL меняется, то меняется и рендеринг. Вы не можете "приостановить" маршрутизатор. (Это ошибка в vue-router, которая давала мне покоя целую вечность, но я отвлекся.)

Вам просто нужно отобразить страницу 404 без изменения маршрута. В компоненте root есть свойство display404 data, которое можно настроить для отображения страницы 404 вручную в шаблоне вместо <router-view>, например: 

<div>
  <my-404-page v-if="display404"/>
  <router-view v-else/>
</div>

Для отображения страницы 404 из любой компонент: 

this.$root.display404 = true

Конечно, это просто базовый пример c, чтобы продемонстрировать, что я имею в виду, вы можете использовать Vuex, чтобы поделиться состоянием, или использовать шину событий, или вы можете отобразить страница 404 другим способом, который работает для вас, и т. д. c.

0 голосов
/ 04 марта 2020

Основываясь на решении Десятилетия Луны, я сделал следующее:

main. js

import Error404 from './views/error/404.vue'

Vue.component('error-404', Error404)

404. vue

<template>
    <div>
        <h1>Page not found</h1>
        <p>Whatever...</p>
    </div>
</template>

<script>
    export default {
        name: 'Page not found'
    }
</script>

маршрутизатор -> индекс. js

const PageNotFound = () => import('@/views/error/404')

function configRoutes() {
    return [
        {
            path: '/',
            name: 'Home',
            component: TheContainer,
            children: [
                // ...
                {
                    path: '404',
                    name: 'Page not found',
                    component: PageNotFound,
                    alias: '*'
                }
            ]
        }
    ]
}

Моя страница, на которой должна отображаться ошибка 404 

<template>
    <div class="animated fadeIn" v-if="clientSettings">
        ...
    </div>
    <error-404 v-else></error-404>
</template>

<script>
    export default {
        name: 'Test',
        data() {
            return {
                clientSettings: null
            };
        },
        async created() {
            this.setClientConfig();
        },
        watch: {
            '$route.params.id': function (id) { this.setClientConfig(id);}
        },
        methods: {
            setClientConfig(id) {
                if (!id) {
                    id = this.$route.params.id;

                    // Redirect to the first valid list, if no parameter is proviced
                    if (!id) {
                        this.$router.push({ name: 'Test', params: { id: this.$root.clientConfiguration[0].name } });
                        return;
                    }
                }

                // Set client settings
                this.clientSettings = this.$root.clientConfiguration.find(cc => cc.name === id);
                // This will return null, if no entry was found, therefore the template will jump into the v-else
            }
        }
    }
</script>
0 голосов
/ 04 марта 2020

Не уверен на 100%, что вы спрашиваете, но может ли какая-либо из них помочь?

Поймать весь маршрут: Из Vue. js документы "Поймать весь маршрут"

Или, если вы управляете ответом на вызов (метод / fetch / et c): используйте комбинацию try / catch и значения данных «loading», чтобы изменить отображение или какой компонент загружен.

...