posva / unplugin-vue-router

Next Generation file based typed routing for Vue Router
https://uvr.esm.is
MIT License
1.69k stars 82 forks source link

How to remove /views/ from path? #524

Closed ultimateshadsform closed 1 month ago

ultimateshadsform commented 1 month ago

I have global views in views\About.vue

And page views in entrypoints\newtab\views\index.vue entrypoints\options\views\index.vue

Depending on the chrome extension view path.

How can I make it be /newtab/index.vue or /options/index.vue instead?

Here is my config:

VueRouter({
        routesFolder: [
          {
            src: 'entrypoints',
            filePatterns: ['*/views/**/*'],
          },
          {
            src: 'views',
          },
        ],
        extensions: ['.vue'],
        exclude: ['**/components/**'],
        dts: './types/typed-router.d.ts',
      }),

Output results in:

  Array(5)
0
: 
{path: '/About', name: '/About', component: ƒ}
1
: 
children
: 
Array(1)
0
: 
children
: 
Array(2)
0
: 
{path: '', name: '/newtab/views/', component: ƒ}
1
: 
{path: 'SetupStep', name: '/newtab/views/SetupStep', component: ƒ}
length
: 
2
[[Prototype]]
: 
Array(0)
path
: 
"views"
[[Prototype]]
: 
Object
length
: 
1
[[Prototype]]
: 
Array(0)
path
: 
"/newtab"
[[Prototype]]
: 
Object
2
: 
{path: '/Settings', name: '/Settings', component: ƒ}
3
: 
{path: '/Setup', name: '/Setup', component: ƒ}
4
: 
{path: '/', redirect: '/newtab'}

How can I make it become /newtab/ instead? How can I remove the /views/ from the path?

In my main.ts I have:

routes.push({
  path: '/',
  redirect: '/newtab',
});
ultimateshadsform commented 1 month ago

I did

VueRouter({
        routesFolder: [
          {
            src: 'entrypoints',
            filePatterns: ['*/views/**/*'],
            path: (file) => {
              // Remove sub path /views/
              return file.slice(file.lastIndexOf('views/') + 'views/'.length);
            },
          },
          {
            src: 'views',
          },
        ],
        extensions: ['.vue'],
        exclude: ['**/components/**'],
        dts: './types/typed-router.d.ts',
      }),

And it seems to work. Please comment if this is not the correct way to do this.

ultimateshadsform commented 1 month ago

Here is final version I did:

path: (file) => {
              // Keep entrypoint and strip out /views/
              const entrypoint = file.split('/entrypoints/')[1].split('/')[0];
              const viewPath = file.slice(
                file.lastIndexOf('/views/') + '/views/'.length
              );
              return `${entrypoint}/${viewPath}`;
            },