1

What structure should be used to generate a route that accepts a param(s).

Eg.

i have pages/verify.vue which produces a verify route. However when i use

router.push({ name: 'verify', params: { phone: '+18383' } })

the route is changed to the verify page but the params are discarded because they were not preset on the route.The warning below is thrown:

[Vue Router warn]: Discarded invalid param(s) "phone" when navigating.

What to do to solve this issue without without switching to manual route definitions? NOTE: I prefer not to have the param values in the url!

Way forward: It seems file system routes have no way of allowing props through except through the URL. I will be moving on with Pinia (State Management) as a workaround for this task.

iampapagray
  • 53
  • 1
  • 6
  • What is the rest of your config (router) and what do you want exactly? – kissu Dec 26 '22 at 12:08
  • The vite-plugin-pages generates the routes based of the names of the files in the pages directory. It also allows for dynamic url routes based on some conventions – iampapagray Dec 26 '22 at 12:22
  • @kissu, I need to be able to parse some params to the verify page. – iampapagray Dec 26 '22 at 12:24
  • 1
    Looking at the documentation, you should have `pages/verify/[phone].vue`. – kissu Dec 26 '22 at 13:47
  • @kissu That would mean the url will be like `localhost:8000/verify/+184923.` And that is not something i want – iampapagray Dec 26 '22 at 14:39
  • You cannot send a param, without a dynamic point in your URL. You cannot go skateboarding without an actual skateboard, same here. Either use just the numbers without the `+` or use an URL query, use some cookies/localStorage, a Vuex store, or alike. Several approaches here even tho I'm not sure why the param one I've suggested is not fine with you. – kissu Dec 26 '22 at 14:43
  • Vue router allows you to send a param when pushing a route by specifying the param name in the route creation. However, because vite-plugin-pages auto generates the routes, i dont have such control. The one you suggested is not ideal because not every data should be displayed in the URL. I appreciate your help though – iampapagray Dec 26 '22 at 14:56
  • What vue-router is doing and what vite-plugin-pages (Nuxt or a lot of other frameworks tbh) is the way to go if you want a route param. If you don't want a route param, I've already listed a few solutions in my previous comment aka pretty [much this](https://stackoverflow.com/a/66872372/8816585) and query params. – kissu Dec 26 '22 at 15:03

1 Answers1

0

OP will be using Pinia for the given use case, as a workaround.

More alternatives are available here: vite-plugin-pages - Route with params/props (Not in URL)

kissu
  • 40,416
  • 14
  • 65
  • 133