nafeeur10
1 year ago
394
2
Vue

Router link is not working

Posted 1 year ago by nafeeur10

I am using Laravel and Vue to build a website. But router-link is not working. I can't figure out the problem.

Error in console: Failed to load resource: the server responded with a status of 404 (Not Found)

Code: app.js:

require('./bootstrap');
window.Vue = require('vue');

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

const example = require('./components/ExampleComponent.vue');

const routes = [
    {
        path: '/example',
        component: example
    }
];

const router = new VueRouter({
    routes
})
// Vue.component('example-component', require('./components/ExampleComponent.vue'));

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


Welcome.blade.php



``<!doctype html>
<html lang="{{ app()->getLocale() }}">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Laravel</title>

        <!-- Fonts -->
        <link href="https://fonts.googleapis.com/css?family=Raleway:100,600" rel="stylesheet" type="text/css">
        <link rel="stylesheet" type="text/css" href="{{ asset('css/app.css')}}">

        <!-- Styles -->
        <style>
 
        </style>
    </head>
    <body>
        <div id="app">
            <nav class="navbar navbar-expand-sm bg-light">
              <ul class="navbar-nav">
                <li class="nav-item">
                  <router-link to="/example">Example</router-link>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">Link 2</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">Link 3</a>
                </li>
              </ul>
            </nav>
            <router-view></router-view>
        </div>
        <script type="text/javascript" src="{{ asset('js/app.js') }}"></script>
    </body>
</html>
``

Please sign in or create an account to participate in this conversation.