pakhrudin
@pakhrudin

Как реализовать правильно router в Vuejs?

Есть проект
5cdca1c2a0a05835618120.png
Файл routes.js
import one_component from './components/AdminComponents/MainComponents/PageComponents/OneComponent.vue';
import two_component from './components/AdminComponents/MainComponents/PageComponents/TwoComponent.vue';
export const routes = [
    {
        path: '/admin/one',
        component: one_component
    },
    {
        path: '/admin/two',
        component: two_component
    }
];

Файл router.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import {routes} from './routes'

Vue.use(VueRouter);

export const router = new VueRouter({
    mode: 'history',
    routes
});

Файл admin.blade.php в котором вызывается главный компонент AdminMainComponent.vue
<body>
<div id="app">
    <admin-main-component :urlname={{ json_encode(Auth::user()->name) }} :urlid={{ json_encode(Auth::user()->id) }} ></admin-main-component>
</div>
<script src="js/app.js">

</script>
</body>

А AdminMainComponents вызывает компонент PageComponent.vue и другие в том числе(меню, футер...)
<page-component :urlid=urlid :urlname=urlname></page-component>

А PageComponent.vue вызывает другие компоненты, смотря какие кнопки нажаты
<template>
    <div class="container page">
        <p>{{urlname}}</p>
        <p>{{urlid}}</p>
        <a v-for="url in urldata">
            <router-link :to="url.url" class="btn btn-success"><p @click="showComponents(url.id)">{{url.name}}</p></router-link>
        </a>
        <router-view></router-view>
    </div>
</template>

<script>

    export default {
        props: ['urlname','urlid'],
        components: {

        },
        data() {
            return {
                urldata:[
                    {id:0,url:"/admin/one",name:'one-component', show:true},
                    {id:1,url:"/admin/two",name:'two-component', show:false}
                    ]
            }
        },
        mounted() {

        },
        methods:{
            showComponents(number){
                for (var i=0; i<this.urldata.length; i++) {
                    this.urldata[i].show=false;
                }
                this.urldata[number].show=true;
            }
        }
    }
</script>

Вопрос
1.Если я нажимаю на любую ссылку из PageComponent.vue, то router меняет адрес и выводит компонент
но когда перезагружаю страницу, то выходин ошибка 404. Почему?
2.Я хочу чтобы при любом route начинающегося с /admin/... у меня показывался AdminMainComponent на нем PageComponent а на нем компонент, который зависит от route. Как?

Вот сама страница
При первом запуске 127.0.0.1:8000/admin
5cdca13c7d944913163934.png
Нажимаю на вторую ссылку 127.0.0.1:8000/admin/two
5cdca169caa79144110189.png
  • Вопрос задан
  • 117 просмотров
Решения вопроса 1
kulakoff
@kulakoff Куратор тега Vue.js
Vue.js developing
По пунктам:
1. Вот здесь ваша проблема описана: https://router.vuejs.org/ru/guide/essentials/histo... Смысл в том, что когда вы перезагружаете страницу вы пытаетесь получить страницу, которой не существует, в итоге 404.

2. Использовать вложенные маршруты: https://router.vuejs.org/ru/guide/essentials/neste...
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
WayToStart Москва
от 40 000 до 80 000 руб.
OOO Делориан Санкт-Петербург
от 100 000 до 140 000 руб.
25 мая 2019, в 08:45
1 руб./за проект
25 мая 2019, в 06:39
100 руб./за проект