My Vue Js Route is not working in laravel ?

I have installed Vue router

npm install vue-router

//In package.json
"vue-router": "^3.4.4"

In App.js, I have import like this

import VueRouter from 'vue-router'
Vue.use(VueRouter);

const router = new VueRouter({
    routes,
    mode: 'hash',
});
//If i remove this then (Unknown custom element: <category>)  error will thrown
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
Vue.component('category', require('./categories/CategoryComponent').default);
//Routes
import { routes } from './routes';

const app = new Vue({
    el: '#app',
    router
});

In route.js

import Dashboard from './components/ExampleComponent'
import Category from './categories/CategoryComponent'


export const routes = [
    {
        path:'/dashboard',
        component:Dashboard
    },
    {
        path:'/categories',
        component:Category
    },

];

In Category Component

<template>
         <router-link to="/dashboard">Dashboard</router-link>
</template>

In the dashboard blade file

@extend('layout.app')
 @section('content')
        <router-view></router-view>
@endsection

Now my problem is Suppose there is this URL http://127.0.0.1:8000/categories#/ and the page goes to CatergoyComponent and when I click the button Dashboard in CategoryComponent Only Url Change http://127.0.0.1:8000/dashboard#/ but the page remains the same as categories Component. until I refreshed. what did I do wrong?

tykus

5 years ago

Level 104

How is your Laravel routing setup?

markus.heb

5 years ago

Level 7

The vue-router doesn't really navigate to a new page, it normally stays on the same page and swaps the contents on the DOM as needed.

So you have to structure a Single Page Application (SPA) with one app page like this:

app.blade.php

@extend('layout.app')
 @section('content')
	<template>
         	<router-link to="/dashboard">Dashboard</router-link>
         	<router-link to="/categories">Categories</router-link>
	</template>
        <router-view></router-view>
@endsection

This app.blade.php file should be served via http://127.0.0.1:8000/ Therefore a simple route in routes\web.php should be enough

Route::view('/', 'app');

As soon as you click on one of the router-link's the proper component should be displayed, where the route-view component was placed.

The links are than as followed:

1 like

Please or to participate in this conversation.