I have a nav bar with below code. but when i click on the anchor element the relative path doesn't get appended to the application url and eventually router not working. How do i make it work?
<nav class="ui menu inverted navbar">
Test1
Test2
Register
Login
</nav>
One option i got is to have a router configured in my app.ts/js and then use the router object to get the menu items like this. as per this post
<nav>
<ul>
<li repeat.for = "row of router.navigation">
<a href.bind = "row.href">${row.title}</a>
</li>
</ul>
</nav>
and the other way is to use click.delegate on each anchor element and in the model return this.router.navigate("specific path like \login or \register") from the on Click function
For random usage of anchor tags that you want to use routes from the aurelia router, you can use the following format:
<a route-href="route:route-as-declared-in-router">Click Me!</a>
Related
Im using Vue and Ionic, this is my code:
I have a page where I have this cards:
<yt-course-card
v-for="lesson in ytTheme.lessons"
:key="lesson"
:name="lesson.group_name"
:lessons="lesson.group_lessons"
></yt-course-card>
in this card i have this:
<ion-card>
<ion-card-header>
<ion-card-title>{{ name }}</ion-card-title>
</ion-card-header>
<ion-card-content>
<ul>
<li v-for="lesson in lessons" :key="lesson">{{ lesson.name }}</li>
</ul>
</ion-card-content>
</ion-card>
This all works and does what I want it to, but I would like this li to be link to other page. I have this other page ready, but I dont know how should I write my router-link, because if I use router-link in -li- element, it doesnt work.
This is how my route-link should look like, but I dont know where or how to put it, so my li element is link to other page.
:router-link="`/yt-course/${lesson.slug}`"
In vue router router-link is not an attribute but a component. To navigate to other pages use the to attribute like show below:
<li :to="{ mame: 'yourRouteName' }">Link to a page</li>
This works fine and all, but it is the best practice to use Vue router's build-in component, like shown below:
<li>
<router-link :to="{ mame: 'yourRouteName' }">Link to a page</router-link>
</li>
I tried using a click event on a <router-link>. It works, but it is reloading the page everytime the link is clicked. I would like to avoid it but I can't figure out how.
I am aware that <router-link> does not accept a simple #click event. I saw on some forums that #click.I native would work, but as we know, that is deprecated.
So I would like to know if there is any solution other than wrapping the router link in a div and putting the listener on that div.
The reason why I want to do this is that I want to bind a class dinamicaly when the link is clicked. I have created a dropdown menu which is triggered onClick. But then when I follow a link inside that dropdown menu, the menu remains open. Therefore, I would like to have an additional #click event to dinamically bind a class (display: none) to the dropdown menu. The thing is that the items inside the dropdown are iterated which send parameters to a Vuex Mutation and therefore i can’t use regular tags and wrapping the router-links with a span or div is also not giving me the desired effect.
Thank you !
Regards,
T.
I have managed to solve the problem using a div wrapper and changing my css (that was preventing the code to work properly)
<div class="dropdown">
<a class="dropbtn" #click="dropClick"><i class="ri ico ri-draft-line"></i> Docs <i class="ri ico ri-arrow-drop-down-line ri-1x"></i></a>
<div class="dropdown-content" :class="{ 'dropdown-content-display': clicked }">
<div class="wrapper" v-for="route in $store.state.menuItems" :key="route.name" #click="dropClick">
<router-link :to="{ name: 'docs', params: { title: route.name } }"> <i :class="'ico ri ' + route.icon"></i> {{ route.name }}
</router-link>
</div>
</div>
</div>
If a understand your question, there is a "active-class" property on vue-router(router-link). You can set your classes dynamically by based on an active route.
After a successful login, it is navigated to the dashboard URL. From that menu, links aren't working even though URL is changing in the address bar. router link in the menu is working when we forcefully do a page reload in the browser. otherwise, nothing is happening. There is no error in the console as well. The code is given below.
login navigation which works currently
this.usermanagementService.login('login', {username: userName, password})
.subscribe(message => {
this.jwt.saveToken(message.data.token);
if (window.localStorage.getItem('locale') === null) {
window.localStorage.setItem('locale', 'en');
}
this.router.navigate(['/dashboard']);
// More lines which handles the error section
The app menu html
<div *ngIf="m.submenus?.length > 0" class="collapse" id="{{ m.name }}" aria-expanded="false">
<ul class="flex-column pl-2 nav submenu-dark">
<li *ngFor="let secondlevel of m.submenus" class="nav-item">
<a class="nav-link collapsed text-truncate" routerLink="{{ secondlevel.slug }}"><span>{{ secondlevel.name }}</span></a>
</li>
</ul>
</div>
Currently routerlink works after we do a forceful redirect instead of angular router navigation. how to fix it?
Put the navigation URL in if a condition or in else condition.
Or another problem is your menu component did not get which user is login, so you should try event emit when user login and subscribe into menu component and set condition related to login user.
Fixed the issue with the following changes in app.component
<app-header></app-header>
<div *ngIf="router.url !== '/login'; else loginTemplateName" id="wrapper" class="toggled container-margin-fix">
<app-menu></app-menu>
<router-outlet></router-outlet>
<app-footer></app-footer>
</div>
<ng-template #loginTemplateName>
<app-menu></app-menu>
<router-outlet></router-outlet>
<app-footer></app-footer>
</ng-template>
Inside the app-menu and app-footer there is an *ngIf checking whether it is not the login url. We need to add app-menu container in both cases in the app.component.html then only it will work eventhough it is hidden inside app-menu. Earlier it was just <router-outlet> only for the login route in the aapp.component.html
In my front end I have a simple index.html that I have placed a ng-view tag in it as follows:
<body>
<div data-ng-controller="MainController">
<ng-view> <ng-view/>
</div>
My routes.js file is something like this:
(function() {
angular.module('mainApp')
.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
$routeProvider.when("/", {
templateUrl: "/startbootstrap-landing-page/home.html"
});
$routeProvider.when("/products", {
templateUrl: "/views/products.html"
});
$routeProvider.otherwise({ redirectTo: '/' });
}]);
})();
When I enter "mywebsite.com/index.html#/" based on the routing in routes.js it will load "/startbootstrap-landing-page/home.html" in the div tag where ng-view is placed. So everything works perfectly till here. But the problem is I have used local addressing/linking tags inside the home.html that they stop working once I load the home.html partial view inside the ng-view div tag. For example I have used something like this in my home.html partial view:
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
About
</li>
<li>
Services
</li>
<li>
Contact
</li>
</ul>
So when I click on for example "Contact" it has to jump to the bottom of my designed page where I have used a tag such as this:
<a name="contact"></a>
.
.
.
But it does not.
The home.html page works perfectly with its local # addressing/linking when used as a standalone html file with html and body tags but its local linking functionality wont work anymore when used as a partial view loaded inside the ng-view tag. Any ideas as to why this happens? Thanks.
I think angular is taking control of the # based urls... have you tried $anchorScroll?
How to handle anchor hash linking in AngularJS
Regards
I would like to change the active pill/tab on document load. I know you can set the active pill like I have below but for other reasons I want to change it after document load. I have tried various bits of JS but nothing seems to work. Here's the HTML and JS (I have also tried replacing data-toggle="pill" with data-toggle="tab" below and still doesn't work).
<div>
<ul class="nav nav-pills pillstyle">
<li class="active tabstyle"><a data-toggle="pill" href="#apple">Apple</a></li>
<li class="tabstyle"><a data-toggle="pill" href="#banana">Banana</a></li>
<li class="tabstyle"><a data-toggle="pill" href="#pear">Pear</a></li>
<li class="tabstyle"><a data-toggle="pill" href="#orange" >Orange</a></li>
</ul>
</div> <!-- nav pills close -->
<div class="tab-content">
<div id="apple" class="tab-pane fade in active"> `
.... content of tabs.
JS
$(document).ready(function(){
$('#banana').tab('show');
});
or
$(document).ready(function(){
$('#banana').pill('show');
});
You just need to change your jQuery selector to address the a element instead of the tab-pane div.
$(document).ready(function(){
$('a[href="#banana"]').tab('show');
});
If you need, you can find more detailed description about bootstrap tabs in the official documentation.
#Stu Here you go.
HTML:
Assign an ID myTab to UL element.
<ul class="nav nav-pills pillstyle" id="myTab">
JS:
$(function () {
$('#myTab a[href="#banana"]').tab('show');
});
Also refer to Bootstrap documentation on selecting different elements on load here. It will give you better understanding.
http://getbootstrap.com/2.3.2/javascript.html#tabs
Working demo: https://jsfiddle.net/tf9k9j27/
Note: Just to answer your trial and error.
You can activate a tab or pill navigation without writing any JavaScript by simply specifying data-toggle="tab" or data-toggle="pill" on an element. Adding the nav and nav-tabs classes to the tab ul will apply the Bootstrap tab styling. (From bootstrap docs. read more to get better clarity)