Create a new page
only create new file in resources/ts/pages directory and you will have new page with auto generated route.
Create demo page
Create a new file which is demo.vue in resources/ts/pages directory with the following content
<template>
<p>This is about page</p>
</template>It will auto register the route with /demo url in typed-router.d.ts. Navigate to that route and you will find the rendered content of demo.vue file.
// typed-router.d.ts file
'demo': RouteRecordInfo<'demo', '/demo', Record<never, never>, Record<never, never>>,Subpath URL
To create a URL which has something like /dashboards/default, we need to create dashboards folder and have to place default.vue file inside dashboards folder.
Let's create a new folder named dashboards in resources/ts/pages directory. Inside this folder let's create a new file default.vue with the following content.
<template>
<p>This is Default page.</p>
</template>then it will generate route with the URL like this:
// typed-router.d.ts file
'dashboards-default': RouteRecordInfo<'dashboards-default', '/dashboards/default', Record<never, never>, Record<never, never>>,Dynamic URL✌️
we want to create a page which can accept ids as parameter and we want to fetch data according to that id. This is called dynamic route in terms of vue-router.
Let's we want to create a dynamic route like /customers/<id>, where id can be any number.
For this create new folder named customers in resources/ts/pages directory and inside customers create a new file with the name [id].vue. Place below content inside this create file:
<script setup lang="ts">
const route = useRoute('customers-id')
</script>
<template>
<h1>Extra page id : {{ route.params.id }}</h1>
</template>Above code create new Route url which is like this:
// typed-router.d.ts file
'customers-id': RouteRecordInfo<'customers-id', '/customers/:id', { id: ParamValue<true> }, { id: ParamValue<false> }>,With this, if you visit /customers/1 it will render Extra page id : 1. here, 1 is taken from URL.
If you visit /customers/2 then it will render Extra page id : 2. It is really very easy to create url using parameter.
Plugins
The following plugins auto-generate routes and wrap layouts in Vue.
Click the links above to view the plugins' official documentation.
Last updated