How to properly implement router in Vuejs?

C

chincharovpc2019-05-16 02:34:41

Laravel

chincharovpc, 2019-05-16 02:34:41

There is a project

File 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 file

import Vue from 'vue'
import VueRouter from 'vue-router'
import {routes} from './routes'

Vue.use(VueRouter);

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

The admin.blade.php file in which the main component AdminMainComponent.vue is called

<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>

And AdminMainComponents calls the PageComponent.vue component and others including (menu, footer...)

<page-component :urlid=urlid :urlname=urlname></page-component>

And PageComponent.vue calls other components, depending on which buttons are pressed

<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>

Question
1. If I click on any link from PageComponent.vue, the router changes address and renders the component,
but when I reload the page, I get a 404 error. Why?
2. I want that for any route starting with /admin/... I have AdminMainComponent displayed on it PageComponent and on it a component that depends on the route. How?
Here is the page itself
On the first launch 127.0.0.1:8000/admin

I click on the second link127.0.0.1:8000/admin/two

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

E

Evgeny Kulakov, 2019-05-16
@chincharovpc

Point by point:
1. Your problem is described here: https://router.vuejs.org/ru/guide/essentials/histo... The point is that when you reload the page you are trying to get a page that does not exist, in 404 as a result.
2. Use nested routes: https://router.vuejs.org/en/guide/essentials/neste...