<router-link> is not clickable

Hi guys,

I am building laravel vue js app ... but i am facing a problem with the router, this is my first time using vuejs ... When i click on the link generated by the url is changing to the desired url in the browser .. but noting is happening in the page ... and there is no logs in the console ..

app.js

require('./bootstrap');

import Vue from 'vue'
window.Vue = Vue;
import VueRouter from 'vue-router'
import routes from "./Router/routes"
import router from "./Router"
import VehiclesList from './components/VehiclesIndex.vue';
import TripsPlot from './components/TripsPlot.vue';

Vue.component('vehicles-index', require('./components/VehiclesIndex.vue').default);
Vue.component('trips-plot', require('./components/TripsPlot.vue').default);
Vue.component('pagination', require('laravel-vue-pagination'));

Vue.use(VueRouter)

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

Router/index.js

import VueRouter from 'vue-router';
import routes from './routes';

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

export default router;

Router/routes.js

import VehiclesList from '../components/VehiclesIndex.vue';
import TripsPlot from '../components/TripsPlot.vue';

const routes = [
        {
            path: '/vehicles',
            component: VehiclesList,
            name: 'vehicles_list'
        },
        {
            path: '/vehicles/:id/trips-plot',
            component: TripsPlot,
            name: 'trips_plot'
        }
    ];

export default routes;

components/VehiclesIndex.vue

<tr
                        v-for="vehicle in vehicles"
                        :key="vehicle.id"
                    >
                        <td>{{ vehicle.id }}</td>
                        <td>
                            <router-link :to="{name: 'trips_plot', params: {id: vehicle.id}}"">{{ vehicle.name }}</router-link>
                        </td>
                        <td>{{ vehicle.trips_count }}</td>
                        <td>{{ vehicle.created_at }}</td>
                    </tr>

Package.json

"devDependencies": {
        "axios": "^0.21",
        "bootstrap": "^4.0.0",
        "jquery": "^3.2",
        "laravel-mix": "^6.0.6",
        "lodash": "^4.17.19",
        "popper.js": "^1.12",
        "postcss": "^8.1.14",
        "resolve-url-loader": "^3.1.2",
        "sass": "^1.20.1",
        "sass-loader": "^8.0.0",
        "vue": "^2.5.17",
        "vue-loader": "^15.9.5",
        "vue-template-compiler": "^2.6.10"
    },
    "dependencies": {
        "laravel-vue-pagination": "^2.3.1",
        "vue-axios": "^3.4.1",
        "vue-router": "^3.5.3",
        "vue-toast-notification": "^0.6.1",
        "vue-utils": "^0.3.0-moved"
    }

tykus

4 years ago

Level 104

Show where you have the <router-view> element?

ehab.aboshehab

4 years ago

Level 3

@tykus I think i am not using it :( ... where to use it ?

ehab.aboshehab

4 years ago

Level 3

@tykus Should i include it inside the component that i am loading the data inside it ?

tykus

4 years ago

Best Answer

Level 104

Generally, I would make a container component, e.g. App.vue and render everything into that:

<template>
    <div>
		<nav>
	        <router-link to="/vehicles">Vehicles</router-link>
    	    <router-link to="/trips">Trips</router-link>
		</nav>
        <main>
			<router-view></router-view>
		</main>
    </div>
</template>

<script>
export default {
    name: "App"
}
</script>

Then, import that into app.js and render it (you currently are importing more components than needed):

require('./bootstrap');

import Vue from 'vue'
import VueRouter from 'vue-router'
import router from "./Router"
import App from "./App.vue"

Vue.component('pagination', require('laravel-vue-pagination'));
Vue.use(VueRouter)

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

1 like

Please or to participate in this conversation.