A JsInterop wrapper for Vue Router to use in Vue GWT.
This wrapper allows you to use Vue Router in Vue GWT apps.
Make sure you have set up your Vue GWT project.
Then follow these steps:
✅ Add the Maven Dependency
<project>
<dependencies>
...
<dependency>
<groupId>com.axellience</groupId>
<artifactId>vue-router-gwt</artifactId>
<version>1.0.0</version>
</dependency>
</dependencies>
</project>✅ Add the GWT dependency
Add this in your app .gwt.xml file:
<inherits name='com.axellience.vueroutergwt.VueRouterGwt'/>✅ Call VueRouter.init()
This will inject the javascript of VueRouter in your page.
You should do it right under your Vue.init().
VueGWT.init();
VueRouter.init();If you already have the VueRouter javascript included in your page by another way, you don't have to call VueRouter.init().
Let's see a simple example.
We have an application with a RootComponent and we want to set up routing for two Components: FooComponent and BarComponent.
FooComponent
@Component
public class FooComponent implements IsVueComponent {
}<div>Hello from Foo!</div>BarComponent
@Component
public class BarComponent implements IsVueComponent {
}<div>Hello from Bar!</div>Ok this Component is going to be a little more interesting.
<div>
<h1>Hello App!</h1>
<p>
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
</p>
<router-view></router-view>
</div>router-link Components above in the template will be replaced by a elements at runtime.
router-view will contain the Component for the active route (either FooComponent or BarComponent).
Let's see how we declare our routes:
// First, we declare a class to configure the routing and register it on some component options
public class RoutesConfig implements CustomizeOptions {
@Override
public void customizeOptions(VueComponentOptions vueComponentOptions)
{
// We first create an object to hold our Router options
RouterOptions routerOptions = new RouterOptions();
// We add the routes to our options by passing
// their path and the Constructor of the Component we want to display on them
routerOptions
.addRoute("/foo", FooComponentFactory.get())
.addRoute("/bar", BarComponentFactory.get());
// We the create our router
VueRouter vueRouter = new VueRouter(routerOptions);
// And set it on our Component options
vueComponentOptions.set("router", vueRouter);
}
}// Then we bind this class to our RootComponent so it customize it's options
@Component(customizeOptions = RoutesConfig.class)
public class RootComponent implements IsVueComponent {
}Easy, right?
If you want more documentation on the API you can checkout the official Vue Router documentation.
Vue GWT is developed by the awesome people at
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent