nativescript-vue / nativescript-vue-navigator

A simple router for NativeScript-Vue, built on top of $navigateTo to simplify routing from within components
MIT License
98 stars 10 forks source link

dynamic routes support #35

Closed kabaluyot closed 4 years ago

rigor789 commented 4 years ago

What do you mean by dynamic routes? What would they solve that's not already possible?

kabaluyot commented 4 years ago

Like in vue router, we can provide and create a dynamic route by passing it in params:

e.g

/social:id or /social/{id}

and passing id lets say 24415 will give us:

/social/24415

Example: in my index.ts, I specify the routes:

import Home from "@/views/Home.vue";
import Categories from "@/views/Categories.vue";

export const routes = {
  '/home': {
    component: Home,
    meta: {
      title: "Home"
    }
  },
  '/categories:id': { .   // -> this is dynamic route with id passed on call as params
    component: Categories,
    meta: {
      title: "Categories",
    }
  },
}
rigor789 commented 4 years ago

Navigator is intentionally simple - you can achieve the same thing by passing in the id as a prop.

this.$navigator.navigate(`/categories', { props: { id: 1234 } })
kabaluyot commented 4 years ago

Hmm, I think I made myself confused. The question should be intended to generate a dynamic page and the navigator can just pass it like your example. Thank for your time and sorry :)

mreall commented 4 years ago

Dynamic routes would be particularly helpful for apps that consume a web API. My Vue web app can receive a dynamic route from the API and route to a page that processes the parameters from the URL. Any component on the rendered page can then read the URL to access the parameters.

With Navigator, when I get a URL from the API, I have to convert it to a Navigator path with props, then pass the props from parent component to child component. This makes it harder to share nativescript components with the web app and more complicated to share the URL parameters.