Is it posible having an optional vue route - vue.js

In my vue application I need an optional router like this
#/profile/(:user/)?task/current-task
Here I want user will be optional. if user not exit then I want to show current login user task.
I know #/profile/(:user/)? it possible. But having children after an optional params not working for me.
any suggestion?

It's possible
You can define #/profile/:user?/task/current-task
Demo
http://jsfiddle.net/29jvk913/
More nested params
http://jsfiddle.net/y3kbovhy/

Related

Can vue-router use regex route matching and pass the match as a named parameter

Under the hood, I understand the vue-router uses path-to-regexp to handle route matching.
If I use the route format:
/app/:collection(/^cases$?)/:id
This matches the route /app/cases/abc123 and directs to the component just fine but doesn't store { collection: 'cases' } on the $route.params object which is what I also need. Is there another way to do this?
My bad, I misunderstood the syntax of path-to-regexp in the docs.
The route matching should have been:
/app/:collection(cases)/:id
.. then you get the route matching with the parameter passed.
I'm unclear if its appropriate to answer the question as correction or delete it. I'm sure someone will let me know ;)

How to add dynamic query parameters to BranchIO link?

Is there a way to specify additional parameters to be passed to the app which are specified by query string?
For example:
https://app.link/hkljhlkh?nonce=7888809
I ended up discovering the answer to this on my own. You can just append query parameters you want and they arrive on your React Native mobile app:
branch.subscribe(({ error, params }) => {
params.nonce # passed through
They also appear on the fallback url as query parameters. Win.
For additional info on adding these link parameters you can refer to https://docs.branch.io/links/integrate/#long-links

vue-router: how to check if current route is a route or one of its subroutes?

I'm wrapping router-link to add some features.
I need to check if current route is a route or a subdolder of a route.
Something like the following
I know it cannot works, because :active need a boolean, but javascript String.match returns an array;: it's to explain my goal
:active="$route.name.match('customer_users*')"
In my router.js I definied that /customer/{customer_id}/users is named customer_users and that /customer/{customer_id}/users/{user_id} is named customer_users_edit.
So i'd like to be able to set ":active" in my wrapper for both these routes.
Use the $route.matched property to see if the current route is your customer_users or any of its children.
For example, using Array.prototype.some()
:active="$route.matched.some(({ name }) => name === 'customer_users')"
See https://v3.router.vuejs.org/api/#route-object-properties
$route.matched
type: Array<RouteRecord>
An Array containing route records for all nested path segments of the current route.

Communication between components with Vue and routes

I'm just starting with vue but I'm stuck here: I want to pass info from a component to another one. I'm using routes.
If you click on teacher > student list > check (the first one) you render a component (student grade). There, I want to output data from the array students which is stored in student list.
How can I do that?
This is my work:
https://codesandbox.io/s/61xk8xjy63
I recommend use params in vue-router.
Sample: https://codesandbox.io/s/zrk6r0o4ml.
In sample used named path (docs: https://router.vuejs.org/essentials/named-routes.html) and params path (docs: https://router.vuejs.org/essentials/passing-props.html).
Also, i use v-for for display array of data (file StudentList.vue, docs: https://v2.vuejs.org/v2/guide/list.html#Mapping-an-Array-to-Elements-with-v-for).
Good luck.

Use route parameters with `app.use` on Express

I cannot use route parameters with app.use on Express 4.16.2.
I have a statement like this:
app.use('/course-sessions/:courseSessionId/chapter-sessions', chapterSessionsRouter)
And, in chapter sessions router:
// Index.
router.get('/', ...resource.indexMethods)
When I got '/course-sessions/0/chapter-sessions/', I have 404.
Then I am trying a statement like this:
app.get('/course-sessions/:courseSessionId/chapter-sessions', ...chapterSessionResource.indexMethods)
Now I have the result I want. So route parameters don't work with app.use.
While I am researching, I got this GitHub issue and this pull request which closes the issue. But it seems that the issue is still around here. Or do I make something wrong?
You have to setup your router in a different way, try using mergeParams to access parameters in parent routes.
let router = express.Router({ mergeParams: true });
See docs: http://expressjs.com/en/api.html
I’d do only app.use('/course-sessions/', chapterSessionsRouter) and handle the id inside the router.