Courses

Vue.js 3 + Laravel 11 API + Vite: SPA CRUD

Vue Route Names and Separate File

You're reading a FREE PREVIEW of a PREMIUM course.
Summary of this lesson:
- Implementing named routes in Vue
- Creating route bindings with :to directive
- Moving routes to separate file
- Restructuring router configuration

In this lesson, we will perform some route cleanup in Vue. We will introduce route naming and move the routes into a separate file.


Named Routes

So let's add a name to the routes.

resources/js/app.js:

import './bootstrap';
 
import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import App from './layouts/App.vue'
import PostsIndex from './components/Posts/Index.vue'
import PostsCreate from './components/Posts/Create.vue'
 
const routes = [
{
path: '/',
name: 'posts.index',
component: PostsIndex
},
{
path: '/posts/create',
name: 'posts.create',
component: PostsCreate
},
]
 
const router = createRouter({
history: createWebHistory(),
routes
})
 
createApp(App)
.use(router)
.mount('#app')

So how to use them by name now? In the main App layout...

The full lesson is only for Premium Members.
Want to access all 27 text lessons of this course? (115 min read)

You also get:

  • 77 courses
  • Premium tutorials
  • Access to repositories
  • Private Discord