How to define a default route

[Reached]

Hi @jofftiquez !

I really like your efforts here, yet I am curious about a couple of things 👍

1. Do you plan to handle authentication in the future? (e.g. redirecting a user based on their authenticated status (could even be a simple boolean check that the user submits themselves)
2. Will there be a way to set a "default start route" ? Currently the NS Vue cli 2.0 template is using render: h => h('frame', [h(App)])where you kinda specify your "default route", but it feels super clumsy to me, what do you think?

Best regards, Casper!

[jofftiquez]

Hey @Reached I'm glad you liked it. NS-Vue's manual routing is not that appealing to me so I created this.

To answer your questions.

1. Yes, definitely! That would be a really helpful feature if implemented. I just need some people to help me start this project from the ground up.
2. As of now there's is no way to do that, but now that you mentioned it I might find a way to do this. It's not that complicated I think for you can render main vue instance once the desired component is present or ready.

Thanks!

[jofftiquez]

Hi @Reached I added some implementation for adding a default entry route in the main.js. Kindly upgrade and see the docu. It's a bit messy as of now so if you have questions just comment them here.

I added authGuard and the previous register is now init which returns the default route.

[Reached]

Amazing! Will test it out :)

[jofftiquez]

@Reached kindly give feedback as well if it's not too much :D

[Reached]

Yea, will try to implement now, then will let you know how it goes 👍

[Reached]

So I tried to implement this, and got this error NativeScript encountered a fatal error: ReferenceError: Can't find variable: regeneratorRuntime- my usecase is probably a bit more advanced than the one in the docs though.

Are we not supposed to export something back to main.js that we can import?

router/index.js:

import Vue from 'nativescript-vue';
import NsVueNami from 'ns-vue-nami';
import Login from '@/components/Pages/Login';
import Newsfeed from '@/components/Pages/Newsfeed';
import * as ApplicationSettings from "tns-core-modules/application-settings";

const isAuthenticated = false;

Vue.use(NsVueNami);

const vm = new Vue();

vm.$nami.authGuard((next) => {
    if(isAuthenticated) {
        next();
    } else {
        next('login');
    }
});

// register all routes here.
vm.$nami.init({
    routes: [
        {
            name: 'login',
            component: Login,
            noAuth: true,
            entry: !isAuthenticated
        },
        {
            name: 'newsfeed',
            component: Newsfeed,
            entry: isAuthenticated
        }
    ]
});

[Reached]

Perhaps it's Babel related? 🤔

[jofftiquez]

@Reached yes babel related. You need to use babel-polyfill just import it as early as possible on the top of you main.js

[Reached]

Alright :) - I think we should add a note about this in the docs, as it might trip up a few users.

[jofftiquez]

@Reached great one. I'll add it, I'll make a section "Debugging", or you could do a PR.

[Reached]

Also I had to export the init function for it to work (otherwise the entry was not found):

export default vm.$nami.init({

[Reached]

If I set ìsAuthenticated = true I get a white screen and the following error message:
NativeScript encountered a fatal error: Error: Page is already shown on another frame- Tried to remove the <Page></Page> element from the page that should be navigated to, but the result is the same 🤔. Do you have an example of how you implemented the entire router in an app? :)

[Reached]

@Reached great one. I'll add it, I'll make a section "Debugging", or you could do a PR.

Ill do a PR :)

[jofftiquez]

I'm am also having that issue even without Nami. I am not entirely sure what's wrong but I just add a stack-layout after the action-bar and it seems to be working well after.

<page>
  <action-bar></action-bar>
  <!-- add this -->
  <stack-layout></stack-layout>
</page>

[Reached]

I'm am also having that issue even without Nami. I am not entirely sure what's wrong but I just add a stack-layout after the action-bar and it seems to be working well after.

<page>
  <action-bar></action-bar>
  <!-- add this -->
  <stack-layout></stack-layout>
</page>

If I strip down my component to the same amount as you have it appears to be working as well, but just adding in a after the actionbar does not seem to do much 🤔

[jofftiquez]

I'm am also having that issue even without Nami. I am not entirely sure what's wrong but I just add a stack-layout after the action-bar and it seems to be working well after.

<page>
  <action-bar></action-bar>
  <!-- add this -->
  <stack-layout></stack-layout>
</page>

If I strip down my component to the same amount as you have it appears to be working as well, but just adding in a after the actionbar does not seem to do much 🤔

Hm that's weird. So far it doesn't happen to me often, so I don't have much knowledge why this persist in the first place. Maybe try to remove the components inside the <stack-layout></stack-layout> one-by-one?

[Reached]

It seems to be happening when my TabView is inside the component :/ - so perhaps it's related to the native components somehow

[jofftiquez]

@Reached It sure is, were you able to fix it?

[jofftiquez]

@Reached dont forget to star please. Hehe. :p

[Reached]

I haven't been able to fix it unfortunately, but I might try to do it in a new app sometime :)

[jofftiquez]

@Reached alright let me know what's causing it when you find out :D