Routing (vue-router) not working with zircleui? about zircleui

[tinchox5]

Thank you for open this issue. I'll work on it ASAP

[tinchox5]

@driekus77 I run a setup of vue-router from scratch under the node environment and the following code seems to work fine:

<template>
  <z-canvas :views="$options.components" />
</template>
<script>
// 1
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

import Production from '/path-to-components/Production'
...
//
// 2
const router = new Router({})
//
export default {
  components: {
// 3
  production: Production,
 acceptance: Acceptance,
 test: Test,
 development: Development,
home: Home,
resource: Resource
//
  },
// 4
  router,
//
  mounted () {
    this.$zircle.config({
// 5
      router
//
    })
    this.$zircle.setView('home')
  }
}
</script>

The key points are:

1. You need to import Vue and Vue-router into App.vue. Also, you need to import your views.
2. Start a vue-router object const router = new Router({}). There is not need to create routes since zircle handles them automatically based on the components.
3. Reference your views under components: {}.
4. Put the router object inside you vue instance
5. Put the router onject inside the zircle config

I hope this explanation contributes to solve your problem!

[driekus77]

Thanks @tinchox5 for your quick help!

I've done most of your points already but maybe I'm mistaking the routing usage:

When I start I get routed to the Home component:
https://localhost:5001/#/home--0

Then I navigate, by :to-view="production", to the Production component:
https://localhost:5001/#/production--0

But when I use above url again in another browser tab I'm routed back to:
https://localhost:5001/#/home--0

I was expecting to use the production url to get directed to the Production view?

Notes:

• I'm NOT using any javascript build system like webpack. Just including vue.js etc in the index.html and the component templates string wise in javascript.
• I'm also NOT using the zircleui store but vuex in stead. (Because I'm used to that store :-) )

Thanks again.

[tinchox5]

Hi @driekus77,
I fully understand what you said regarding the use of the routes... I'm afraid there is an important limitation when you use a route and zircle together: right now always you enter a route the router redirects to the initial view (eg: home).

Sorry about that, maybe it is useless for you using a router on this conditions. However, in the near future I could try to fix that by overriding the redirect action in case the user manually set a route.

[tinchox5]

I mean using a router with zircle is not possible in a conventional way right now because as zircle uses a kind of stalked views (the previous view is visible along with the current view). I have to find a solution to render the previous views as well, not only the current one. But I think it's possible to reach a solution.

[driekus77]

Hi @tinchox5,

I've managed to get a workarround by using the vue-router only. Together with:

   if (vm.$route.path != undefined && vm.$route.path.length > 1) {
            var viewName = '';
            if (vm.$route.path == '/production') {
                viewName = 'production';
            }
            else if (vm.$route.path == '/acceptance') {
                viewName = 'acceptance';
            }
            else if (vm.$route.path == '/test') {
                viewName = 'test';
            }
            else if (vm.$route.path == '/development') {
                viewName = 'development';
            }
            this.$zircle.setView(viewName);
        }
        else {
            this.$router.replace('/');
        }

And in the environment specific views in mounted I use:

this.$router.replace('/production');

You are right: The previous view is not there so only the routed view is visible. But I can navigate back to home so for me its fine.

Thanks again for you quick responses and help.

Keep up to good work with is nice library!

Kind regards,

Henry Roeland

[tinchox5]

Awesome! Thank you for sharing your solution and for your kind word regarding zircle! I'm going to tell you when I implement a feature to use the router properly.

[driekus77]

My workarround does need events:
When returning from a view (no idea???)
When (re)entering a view (mounted?)

This in order to replace the url properly.

Can you give me some advice?

Thanks

[tinchox5]

Hi! I don’t understand what do you mean with events. Do you mean params or hooks?

…

On Wed, Dec 5, 2018 at 6:15 AM Henry Roeland ***@***.***> wrote: My workarround does need events: When returning from a view (no idea???) When (re)entering a view (mounted?) This in order to replace the url properly. Can you give me some advice? Thanks — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#19 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ALBcDWIXxY6pFL2V_UtdO2V_3u5l1K_Wks5u16rUgaJpZM4Y_DXk> .

[driekus77]

Events like @click -> @Enterview | @leaveView

Or hooks like mounted -> enter | beforeLeave

I know the Enter view can be done in existing mounted hook. But for the leave I cant think of something.

[tinchox5]

Did you try the programmatic navigation https://zircleui.github.io/docs/api/z-spot.html#using-programmatic-navigation?

[citrus327]

Hi, I have a problem with routing too.

I'm using auth0 as my third party authentication service, after I did the login logic, the auth0 service will call a callback URL (in this scenario callback URL will be http://localhost:8080/callback).

I've been playing around with this beautiful library for about few hours, but I didn't find a way to actually make this URL work.

Previously (before using Zircle UI), I created a routes mapped with /callback and mounted a Callback.vue component. In Callback.vue, I will parse some parameters like accessToken userId and store them in vuex, then just simply redirect to a home page whatever.

In Zircle UI routing system, seems like it doesn't support custom URL (I know custom URL sounds stupid XD, but you know what I mean), the URLs using vue-router are like ' http://localhost:8080/home-0'.

Just like driekus77 explained his idea on routing, I can totally do a mapping between vue-router and Zircle UI routing system, but is there any way to make this happen? I mean in a proper way.

[tinchox5]

Hi @phshy0607, thank you for participating in this discussion!

As you said zircle adds a suffix '--n' in the views... The main reason for this is that you can reuse several times the same view. So, to avoid conflicts with previous views zircle differentiates each view from others by adding a suffix.

Having said that I understand that it would be nice to allow custom urls when you are using vue-router. I mean, if you define routes, those routes should be used and no suffix should be added.

I need some time to rethink the use of vue-router with zircle, since right now it isn't something really useful.

[tinchox5]

@phshy0607, @driekus77 I made a little change on zircle to avoid inserting suffix when the router is enabled (v1.2.0). This is a just a small fix. I'll try to find a more comprehensive workaround in some days. Sorry for the inconvenience

[citrus327]

@tinchox5 it's totally fine. Thanks for the contribution!
I will try it out soon. XD

[tinchox5]

Zircle and vue-router WIP

• Use Vue-router routes along with automatic zircle routes
• Use routes to render views and set the initial defined view to go back.
• Test cases with params, optimize code

@driekus77, @phshy0607 I realized that is better to keep zircle as independent as possible from Vue-router. For this reason, I made some changes on zircle to use Vue-router in a classical way.

Now, when a route is set in a browser, the corresponding view is rendered (/docs renders docs view). In this case, when the user goes back a predefined view will be rendered (eg: home).

Unless you have some suggestions to consider I'll perform some tests and publish a new release with the mentioned changes.

[tinchox5]

Information and guides on https://zircleui.github.io/docs/guide/using-vue-router.html