Am new to aurelia, i have a main menu in left side, one of the menu(mail) is having sub-menus (inbox,sent,trash). i need to do if the sub menu is active(#current URL, #activeclass, #CSS ) needs to keep active class for the parent menu (mail).
app.js
export class App {
configureRouter(config, router){
config.title = 'DMS';
config.map([
{ route: ['dashboard',''], name: 'Dashboard',
moduleId: './templates/dashboard/dashboard', nav: true, title:'Dashboard',settings:{'img' : 'ic-dashboard.png'} },
{ route: ['settings'], name: 'Settings',
moduleId: './templates/settings/settings', nav: true, title:'Settings' ,settings:{'icon' : 'settings'} },
{ route: ['inbox'], name: 'inbox',
moduleId: './templates/mail/inbox/inbox', nav: true, title:'Mail' ,settings:{'img' : 'mail.png'} },
{ route: ['inbox/trash'], name: 'trash',
moduleId: './templates/mail/trash/trash', title:'Mail' },
{ route: ['inbox/sent'], name: 'sent',
moduleId: './templates/mail/sent/sent', title:'Mail'},
]);
this.router = router;
}
}
Menu list also applying active class
<div class="row col s12 ${row.isActive ? 'active' : ''}" repeat.for = "row of router.navigation" >
<a href.bind = "row.href">
<div class="col s2 " >
<div if.bind="row.settings.img">
<img src="src/assets/${row.settings.img}">
</div>
<div if.bind="row.settings.icon">
<i class="tiny material-icons">${row.settings.icon}</i>
</div>
</div>
</a>
</div>
sub-menu url
<div class="col s8 offset-s2 mail_actionLst">
<ul>
<li class="inbox mail_active"> Inbox <span>(43)</span> </li>
<li class="sent">Sent </li>
<li class="trash">Trash</li>
</ul>
</div>
How to set parent class active.
Because these are different routes, not parent + children.
You should describe child route in parent class.
You can add code to inbox.js:
configureRouter(config, router){
config.map([
{ route: ['trash'], name: 'trash',
moduleId: 'path_to_trash', title:'Mail' },
{ route: ['sent'], name: 'sent',
moduleId: 'path_to_sent', title:'Mail'},
]);
this.router = router;
}
Don't forget to add
<router-view></router-view>
to inbox.html.
Related
My hunch is that there is some hydration mismatch where the FontAwesomeIcon was not rendered on the server (only the span) and then on the client both child nodes of the NuxtLink were rendered (the svg and the span), prompting Nuxt to render the span twice.
The console does not return an error, though.
Any thoughts on how to debug this?
This is the Vue component:
<template>
<ul v-if="routes.length > 0" class="col-span-2 flex flex-col">
<li v-for="(item, i) in routes" :key="item.name">
<NuxtLink :to="item.path" target="_blank">
<FontAwesomeIcon :icon="item.icon" class="mr-3" fixed-width />
<span>{{ item.title }}</span>
</NuxtLink>
</li>
</ul>
</template>
<script lang="ts">
export default defineComponent({
props: {
links: {
type: Array,
default: () => ["instagram", "facebook", "email"],
},
},
computed: {
routes() {
return [
{
name: "instagram",
path: "https://www.instagram.com/insta.name/",
title: "Instagram",
icon: ["fab", "instagram"],
},
{
name: "facebook",
path: "https://www.facebook.com/fb.name",
title: "Facebook",
icon: ["fab", "facebook"],
},
{
name: "email",
path: "mailto:hello#example.com",
title: "Email",
icon: ["fas", "envelope"],
},
].filter((e) => this.links.includes(e.name));
},
},
});
</script>
I have some routes which are newly added. the sidebar is dynamically created based on links added to the routes.
I am able to print the route name in plain text but when assigned to the vue-route it simple gives localhost:8080 so where am i going wrong.
configroutes file:
const routes = [
{
path: 'create_schedule',
name: 'activate.create_schedule',
meta: {
_routeName: 'activate_create_schedule',
sectionName: 'Create Schedule'
},
component: createSchedule,
},
]
Main Routes File
import ConfigureRoutes from './configureRoutes.js';
const routes = [
...ConfigureRoutes,
];
export default routes;
export const getActivateConfigRoutes = function () {
return routes;
};
dashboard Component file
data() {
const configRoutes = getActivateConfigRoutes();
const sidebarRoutes = [
{
name: '/',
meta: {
sectionName: 'CONFIGURE'
},
redirect: {
name: 'activate.create_schedule'
},
children: [
...configRoutes
]
},
];
return {
sidebarRoutes
};
}
}
</script>
aside bar:
<aside class="menu">
<ul class="menu-list --campaign-sidebar">
<li class="main-section-menu" v-for="(sidebarRoute, index) in sidebarRoutes" :key="sidebarRoute.id">
<router-link :to="{ name: sidebarRoute.name, params: { campaign_id: currentCampaign.id }}" class="sidebar-link" active-class="is-active">
{{ sidebarRoute.meta.sectionName }}
</router-link>
<ul class="sub-menu-list" v-if="sidebarRoute.children.length > 0">
<li v-for="childRoute in sidebarRoute.children" :key="childRoute.id">
<router-link :to="{ name: childRoute.name , params: { campaign_id: currentCampaign.id }}" class="sidebar-sub-link" active-class="is-active-submenu router-link-active">
{{ childRoute.meta.sectionName }} {{ childRoute.name }}
</router-link></li>
</ul>
<span class="base" v-if="((sidebarRoutes.length - 1) === index)"></span>
</li>
</ul>
</aside>
you can see what when I try to print childRoute.name, it gives me the name and so that data is passed properly to the loop. then what is the issue here ? can someone help on the same ?
[vue-router] Route with name 'activate.create_schedule' does not exist vue-router.esm.js:16
I am working on creating a page in plunker to demo aurelia routing. Here is the link. For some reason, I am unable to show the route in the page. I am able to run similar code in my local environment just fine. I think it is something in plunker that has to be done differently.
Here is the code:
app.html
<template>
<h1>Hello</h1>
<div class="row col-lg-6 col-lg-offset-3">
<div class="btn-group col-sm-offset-1" role="group" aria-label="...">
<a repeat.for="row of router.navigation" class="${row.isActive ? 'active btn btn-primary' : 'btn btn-default'}" href.bind="row.href">
${row.title}
</a>
</div>
<router-view></router-view>
</div>
</template>
app.ts
import { Aurelia, PLATFORM } from "aurelia-framework";
import { Router, RouterConfiguration } from "aurelia-router";
export class App {
router: Router;
// Configure Routing
configureRouter(config: RouterConfiguration, router: Router): void {
console.log("Aurelia routing");
config.title = "Aurelia Routing";
// config.options.root = "/";
config.map([
{
route: "",
redirect: "home",
settings: { icon: "home" }
},
{
route: "home",
moduleId: "./Home",
nav: true,
title: "Home",
settings: { icon: "home" }
},
{
route: "/support",
moduleId: "./Support",
nav: true,
title: "Support Request",
settings: { icon: "home" }
}
]);
this.router = router;
console.log(router);
}
// console.log(this.router);
}
Further details, such as bootstrapping, etc can be found in plunker link.
There's a typo/error in your main.ts:
aurelia.use.basicConfiguration()
Should be:
aurelia.use.standardConfiguration()
Changing this, I saw the console.log messages you put in the configuration, but I got another error, but the routing works now.
I am developing and application using durandal. I have two sections in my page with different navigation menu. I am using composition to keep make these subviews. But I am not sure how to define routes for these sections.
In your shell.js
{ route: 'work*details', moduleId: 'profile/index', title: 'Profil', nav: 1, hash: '#profil', authorize: ["User", "Administrator"] },
in the subfolder index.js
var childRouter = router.createChildRouter()
.makeRelative({
moduleId: 'viewmodels/marketplace',
fromParent: true
}).map(userRoute[
// put you sub nav here
]).buildNavigationModel();
return {
router: childRouter,
work: ko.computed(function () {
return ko.utils.arrayFilter(childRouter.navigationModel(), function (route) {
return route.type == 'intro';
});
})
};
the markup
<ul class="nav navbar-nav">
<!--ko foreach: work-->
<li data-bind="css: { active: isActive }">
<a data-bind="attr: { href: hash }, text: title"></a>
</li>
<!--/ko-->
</ul>
find out more here.
I am probably missing something basic, but when building navigation I am attempting to define multiple parameterized routes in the shell. The idea is that all of these routes will pass the user through to the same view/vm, but the parameter will determine content that is displayed after an ajax call). The routing itself works well, but the title is always passed through from the first route in the list.
activate: function () {
router.makeRelative({moduleId: 'viewmodels'}).map([
{
route: 'grid/:page',
title: 'Title 1',
moduleId: 'grid',
nav: 3,
hash: '#grid/param1'
},
{
route: 'grid/:page',
title: 'Title 2',
moduleId: 'grid',
nav: 2,
hash: '#grid/param2'
},
{
route: 'grid/:page',
title: 'Title 3',
moduleId: 'grid',
nav: 4,
hash: '#grid/param3'
},
{
route: 'grid/:page',
title: 'Title 4',
moduleId: 'grid',
nav: 5,
hash: '#grid/param4'
}
]).buildNavigationModel();
};
So, regardless of which of the generated links a user clicks on, the Title is always returned as 'Title 1'. Nav order does not matter. The first physical object in the list will supply the title for all links. If I hard code the links into shell.html and use a splat in the router I do not have this problem, however, hard coding the links is not feasible nor desirable for the app.
So, the question is, what am I doing wrong?
In the code above there's truly only one route 'grid/:page'. By defining a parameterized route the router maps everything the match grid/:page to the first route.
See more about that in the router documentation http://durandaljs.com/documentation/Using-The-Router/.
Instead of using the router.navigationModel() build your own small navigation model.
Top level down approach:
Step 1 Defining a grid route with an optional parameter (/:page).
router
.makeRelative({moduleId: 'viewmodels'})
.map([
{
route: 'grid(/:page)',
title: 'grid page',
moduleId: 'grid',
hash: '#grid'
}
])
.buildNavigationModel();
Step 2 Navigation model
define(['plugins/router', 'knockout', './navItem'], function( router, ko, NavItem ) {
var ctor = function(){
this.childRouter = router;
this.param = ko.observable('');
this.navigation = ko.observableArray([
new NavItem({title: 'Title 1', param: 'param1'}),
new NavItem({title: 'Title 2', param: 'param2'}),
new NavItem({title: 'Title 3', param: 'param3'}),
new NavItem({title: 'Title 4', param: 'param4'})
]);
};
ctor.prototype.activate = function(param){
this.param('Param: ' + (param || 'no param!'));
};
return ctor;
});
Step 3 Navigation item model
define(['plugins/router'], function( router ) {
var ctor = function(options){
this._options = options || {};
this.init(this._options)
};
ctor.prototype.init = function(options){
this.title = options.title;
this.param = options.param;
this.hash = '#extras/optional/' + this.param;
};
ctor.prototype.isActive = function(){
return router.activeInstruction().fragment === this.hash.replace('#', '');
};
return ctor;
});
Step 4 Navigation view
<div class="navbar">
<div class="navbar-inner">
<ul class="nav" data-bind="foreach: navigation">
<li data-bind="css: { active: isActive() }">
<a data-bind="attr: { href: hash }, html: title"></a>
</li>
</ul>
<div class="loader pull-right" data-bind="css: { active: childRouter.isNavigating }">
<i class="icon-spinner icon-2x icon-spin"></i>
</div>
</div>
<div>
<h3 data-bind="text: param"></h3>
</div>
</div>
Live version can be seen at: http://dfiddle.github.io/dFiddle-2.0/#extras/optional.
Feel free to fork and adjust to your liking.