web.php içine gelecek tüm istekleri anlamak için;
|
1 2 3 |
Route::get('{any}', function () { return view('index'); })->where('any', '.*'); |
bu indexin içine klasik app.blade içeriğinden sonra content içine bir app divi koy. aşağıdaki örnek kod;
|
1 2 3 4 5 6 7 |
@extends('layouts.main') @section('content') <div id="app"> <router-view></router-view> </div> @endsection |
vue router kurmak için;
|
1 |
npm install vue-router |
yazıyoruz
app.js dosyamıza gelip üst satıra;
|
1 2 3 |
import VueRouter from "vue-router"; import { routes } from "./routes"; Vue.use(VueRouter); |
sonra alt satıra ekliyoruz;
|
1 2 3 4 5 6 7 8 9 |
const router = new VueRouter({ mode: "history", routes: routes }); const app = new Vue({ el: "#app", router: router }); |
app.js ile aynı klasörde routes.js diye bir dosya oluşturuyoruz.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
import EmployeesIndex from "./components/employees/Index"; import EmployeesCreate from "./components/employees/Create"; import EmployeesEdit from "./components/employees/Edit"; export const routes = [ { path: "/employees", name: "EmployeesIndex", component: EmployeesIndex }, { path: "/employees/create", name: "EmployeesCreate", component: EmployeesCreate }, { path: "/employees/:id", name: "EmployeesEdit", component: EmployeesEdit } ]; |
bu path içinde yazanlar için components altında o isimlerle componentler oluşturuyoruz. bedavadan oraya yazmadık yani.
link vermek için;
|
1 |
<router-link :to="{ name: 'EmployeesCreate' }" class="btn btn-primary mb-2">Create</router-link> |
name değeri yukarıda routes dizine atadığımız name olacak.