CODEWITHSUNDEEP
aurelia
user3787896
user3787896

Reputation:

Best way to create navigation in a single page

I would to create a navigation module for navigate between the different section of my single page app but I don't find any elegant solution.

Do I need to use the route component ?

Upvotes: 2

Views: 282

Answers (1)

Tarps
Tarps

Reputation: 1933

Here's a tutorial on that topic: https://www.tutorialspoint.com/aurelia/aurelia_routing.htm

But shortly, it works like this:

Step 1: Create subviews

subview.html

<template>
  <h1>Subview</h1>
</template>

subview.js

export class Subview {}

Step 2: Configure parent view

Add <router-view> to parent's html file

app.html

<template>
  <router-view></router-view>
</template>

Configure Router in parent's viewmodel

configureRouter(config, router) {
  config.map([
    { route: ['', 'home'], name: 'subview', moduleId: './subview', nav: false, title: 'Subview' },
  ]);
  this._router = router;
}

Now you can see the subview's contents put into the <router-view> whenever you are on the route /#/ or /#/home.

You can navigate between the views by adding a route-href="route-name" parameter to anchor tags. Or by calling the function from the this._router object directly, for example: this._router.navigateToRoute('route-name');.

Upvotes: 2

Related Questions