Separating routes in another file and using route names

Step 01: Lets create a new route file index.js under resources/js/routes and move route codes from app.js to there like below

import { createRouter, createWebHistory } from 'vue-router'

import IssuesIndex from '../components/Issues/Index.vue' 
import IssuesCreate from '../components/Issues/Create.vue' 

const routes = [ 
    { path: '/', component: IssuesIndex },
    { path: '/create', component: IssuesCreate },
] 
 
export default createRouter({ 
    history: createWebHistory(),
    routes
})

Two things are changed here. One is making correct file path ../ for resolving components files ( Index.vue and Create.vue ). Two is exporting createRouter() so that it can be imported inside app.js

Step 02: Now importing routes file only inside app.js would suffice the linking here

import router from './routes/index'

Step 03: Now lets add route names for issues list and issues create link like below inside index.js under resources/js/routes

const routes = [ 
    { path: '/', name: 'issues.list', component: IssuesIndex },
    { path: '/create-issues', name: 'issues.create', component: IssuesCreate },
] 

Step 04: Making changes in master.vue to use this route names instead of hard coding the link name binding with vue :to attribute like below

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
    <ul class="navbar-nav">
      <li class="nav-item" active-class="active">
        <router-link :to="{ name: 'issues.list' }" class="nav-link" href="#">Issues</router-link>
      </li>
      <li class="nav-item" active-class="active">
        <router-link :to="{ name: 'issues.create' }" class="nav-link" href="#">Issues Create</router-link>
      </li>
    </ul>
  </nav>