Retrieve the current route hash during the activation process

I have two routes with different hashes but the same view model:

var routes = [
    { route: '', moduleId: 'home', title: 'Home', nav: 1 },
    { route: 'details(/:id)', moduleId: 'details', title: 'Details', nav: 2, hash: '#details'  },
    { route: 'access_token=*token', moduleId: 'details', title: 'Details', nav: false, hash: "#access_token=" }];

How can I determine the path taken to reach the details view model in the activate method of the details view model? I attempted to iterate over the router.routes array and find the route with isActive() == true, however this is not available until the activate method returns a result.

Additionally, if I add the detection of the active route into the binding method of the view model, both routes appear as active regardless of which one was actually accessed:

function binding() {

    router.routes.forEach(function (route) {
        console.log('Route ' + route.hash + " isActive:" + route.isActive());
    });
}

Console log:

Route # isActive:false details.js:37
Route #details isActive:true details.js:37
Route #access_token= isActive:true 

Answer №1

If you want to monitor changes in the route, consider examining the activeInstruction property of the router:

router.activeInstruction();

You have the option to either subscribe to it directly or create a computed property based on it.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the reason for using the jQuery load() method in conjunction with multiple sprites as a boolean?

Currently, I am developing a program that requires loading two sprite images. In my previous approach, I utilized the following code: $(sprite1 && sprite2).load(function() { // code to execute upon loading }); Upon reflection, I realized that ...

Trigger the function of a Jquery plugin once AngularJS has finished rendering

Upon receiving an object collection via Ajax, I store it in a variable: // Variable available for the template this.list = []; // Function to refresh the list var self = this; this.refreshList = function () { ChannelService.get({}, function (result) { ...

"Trouble with Angular's http.get method failing to retrieve data from MySQL through Node

I am struggling to retrieve data from MySQL using Angular and Node.js. Despite trying, I am unable to make it work. When I check Postman using the link http://localhost:8080/locations, I can see the data. { "status": "200", "items": [ { "cit ...

successful callback after passport registration

router.post('/register', function(req, res, next){ var name = req.body.name; var email = req.body.email; var username = req.body.username; var password = req.body.password; var password2 ...

Angular 4: Implementing Subscription with Behavior Subject

I am currently working with Angular 4 and utilizing observables. I have a requirement to share data between components as I am using BehaviorSubject along with observables. Below is the code snippet: import { Subject } from 'rxjs/Subject'; imp ...

What are the steps to transform an HTML select element into a sub-menu user interface?

Can the native HTML element select be used to add submenus? Processes lack of process failure to follow process HTML <!DOCTYPE html> <html> <body> <select> <optgroup label="Swedish Cars"> <option value="volvo"&g ...

An issue has been encountered with the Vue Router within the Micro Front End/Web Components setup, displaying the error message: "Uncaught TypeError:

I encountered an issue that I need help with. Here is the scenario: I have built a Vue application called my-admin micro app consisting of 4-5 screens/components (manage user, manage notifications, manage roles, etc.). I created a router.js file where I d ...

Is it possible to customize the Toolbar in react-data-grid by adding your own components?

I have been working with the react-data-grid and I'm almost done with it. The filters button is already displaying in the Toolbar, but now I need to add another button that will affect all selected items in the table. I want to place this new button o ...

Showing the date object in a react component

As a new programmer, I decided to start with React hooks based on recommendations that it's easier to learn. However, I encountered an issue when trying to display the deliveryDate on the screen. React doesn't seem to accept objects as children, ...

Begin HTML rows in a collapsed state as the default setting

I successfully integrated this example into my project (using Vapor Swift & Leaf) and it is functioning properly: A simple demonstration of collapsible rows in HTML/CSS/JS However, I am looking to have all the collapsible rows start off hidden by default. ...

Transforming an Image URL into base64 format using Angular

I'm currently facing difficulty when attempting to convert a specified image URL into base64. In my scenario, I have a string that represents the image's path. var imgUrl = `./assets/logoEmpresas/${empresa.logoUrl}` Is there a way to directly co ...

How to extract a JavaScript object from an array using a specific field

When dealing with an array of objects, my goal is to choose the object that has the highest value in one of its fields. I understand how to select the value itself: Math.max.apply(Math, list.map(function (o) { return o.DisplayAQI; })) ... but I am unsur ...

Tips for adding a "return" button to a page loaded with AJAX

While working with jQuery in prototype to load pages using Ajax, I've come across a feature on big sites like Facebook and Twitter that I'd like to implement: a 'back' button that takes the user back to the previous page when clicked. S ...

When working with JS Store, you may encounter an error message stating "The 'exportJson' property is not found in the 'Connection' type."

connection.exportJson({ from: "Table_Name", where: { Column1: some_value, Column2: some_another_value } }).then(function() { console.log('Export successful'); }).catch(function(error) { console.log(er ...

When working in Javascript, make sure to replace newline and carriage return characters in strings with empty spaces. Also, don't forget to replace the literal sequences and

When working with Javascript, I am looking to perform multiple string replacements as outlined below. Remove all newlines and carriage returns Swap out instances of \n with a newline character Change occurrences of \r with a carriage return char ...

Using node.js to make an HTTP request and parse JSON data with the

I am currently working on developing a web application using node.js that needs to interact with a PHP API. My goal is to request a JSON object from the PHP API, which I can then use in one of my .ejs templates. Below is the code snippet for my node.js im ...

Utilize express.static to showcase and fetch HTML content before serving JavaScript files

I'm having trouble getting my home.html file to display properly on the browser when I'm using express.static. Here is how my directory and file layout are structured: dir main -server.js dir subMain dir routing -routes.js ...

Reorder elements within an array while making sure to account for any blank spaces

I am currently developing a tool for staff/shift assignments, where each week the staff will be assigned tasks. For the following week, I want to shift all the staff down by one task on the list, with the last staff member cycling back to the top of the li ...

What is the best way to loop through a nested object and extract values into an array?

I'm currently working on extracting data points from an API response to use in graphing. My goal is to extract an array of the "4. close" values from the object below. let res = { "Meta Data": { "1. Information": "Daily Prices (open, hig ...

What is the best way to showcase a consistent number of images in a row across various devices?

I'm trying to figure out how to display a set of images in a row using Bootstrap grids. On large devices, I want 4 images displayed, on small and medium devices I only want 2 images shown. However, when I resize the screen to a smaller size, the image ...