Skip to content

Using vue router

Julian Gojani edited this page Aug 27, 2020 · 2 revisions

Using vue-router

NPM

npm install vue-router

resources/js/index.js

/*...*/
import router from './router'

/*...*/

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

resources/js/router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Homepage from '../views/Homepage.vue';
import About from '../views/About.vue';

Vue.use(VueRouter)

const routes = [
    {
        path: "/",
        name: "Homepage",
        component: Homepage
    },
    {
        path: "/about",
        name: "About",
        component: About
    }
]

const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes: routes
})

export default router

resources/js/views/Homepage.vue

<template>
    <div>
        <h1>Test</h1>
        <router-link to="/about">About</router-link>
    </div>
</template>
<script>
export default {
    name: "Homepage"
}
</script>

resources/js/views/About.vue

<template>
    <div>
        <h2>About</h2>
    </div>
</template>

app/routes.php

<?php
/*...*/
$router->get("(.*)", "homepage.php");
$router->setPageNotFound("homepage.php");
/*...*/

Done!

npm run build