When redirecting to the same component, Vue.js hooks are not triggered

In my Vuejs project, I have two pages located at the same level with a common component. However, when I redirect from post/new to post/edit/:id, the beforeMount method is not being called.


redirect() {
    this.$router.push({path: `home/post/edit/${this.post.id}`})
},

Routes:


{
    path: 'home',
    name: 'home',
    component: {
        render(c) {
            return c('router-view')
        }
    },
    children: [  
    {
        path: 'post/new',
        component: PostForm,
        name: 'Create',
        props: {readOnly: false}
    },
    {
        path: 'post/edit/:id',
        component: PostForm,
        name: 'Edit',
        props: {readOnly: false}
    },
    ]
},

Answer №2

If you are consistently using the same component while navigating between post/new and post/edit/:id, it means your component is already mounted. The only thing changing is the routes. You can consider adding beforeRouteUpdate or implementing a watch on $route to handle this behavior.

Try using: { $route: { immediate: true, handler() { } } }

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

Symfony Form Validation through Ajax Request

Seeking a way to store form data with Symfony using an Ajax call to prevent browser refreshing. Additionally, I require the ability to retrieve and display field errors in response to the Ajax call without refreshing the page. I have a Symfony form setup ...

What is the best way to retrieve data from the next page in a Protractor test?

I am currently in the process of automating the test for booking a flight. When I enter the credentials on the homepage, click the Submit button, and the browser navigates to the search results page. const EC = protractor.ExpectedConditions; describe( ...

Encountered an issue loading a resource due to a lost network connection while using Safari 9 and JBoss WildFly 8.2

After successfully deploying my War file to the JBoss Wildfly 8.2 server, I attempted to access the application link from a remote MAC machine. The application opened correctly, but some functionalities were not working properly. An error message popped u ...

Ways to alter the color of an icon when hovering over it

Is there a way to change the color of a material icon inside an IconButton material component when hovering over the IconButton? I've tried adding a class directly to the icon, but it only works when hovering over the icon itself and not the IconButto ...

Running various callbacks consecutively from an array in JavaScript

I have a series of functions in an array, each one calling a callback once it's finished. For example: var queue = [ function (done) { console.log('Executing first job'); setTimeout(done, 1000); // actually an AJAX call ...

Using the Position Sticky feature in Next.js

As a newcomer to sticky elements, I decided to implement a sticky sidebar in my project. Unfortunately, after copying and pasting some code snippets related to sticky sidebars, it seems that the functionality is not working as expected. <Layout title= ...

adding a JavaScript module to a handlebars template

I have a few different files that I'm working with: In the server.js file, I have the following code: app.get('/main/:id', function(req, res) { res.render('main', { products: products }); }) Within the main.hbs file, I have ...

Verification of the data entered in the input box

I am looking to develop an Input Box where users can enter the private details of a person. The first character must be either A or E, and the rest can be alphanumeric with no special characters allowed. I need to implement validation on the client side to ...

What could be the reason for Jest flagging CSS as untested instead of identifying untested functions?

While working on my vue3 project and writing tests with jest, I have encountered an issue where jest is incorrectly marking the CSS within several single file components as untested, even though it doesn't need to be tested. Moreover, its assessment ...

After a period of 10 minutes with no activity, proceed to the next page

I am in the process of developing a custom local website that will be displayed on a large touch screen at my current workplace. Only one user can interact with it at a time. My client has requested a screensaver feature to appear after 10 minutes of no i ...

Problem with selecting odd and even div elements

I have a div populated with a list of rows, and I want to alternate the row colors. To achieve this, I am using the following code: $('#PlatformErrorsTableData').html(table1Html); $('#PlatformErrorsTableData div:nth-child(even)').css(" ...

Click on the button to add a new question and watch as another row magically appears

Working with ReactJS My goal is to display 10 rows by default, followed by a button labeled "Add a new question" which would create the 11th row. View current row image here Currently, only one row is being shown [referencing the image below]. I aim to ...

Is there a way to trigger an Axios response without repeated calls or the use of a button?

As I navigate my way through using react and Axios, I encountered an issue with a get request in my code. Currently, I have a button that triggers the request when clicked, but I want to eliminate the need for this button and instead have the information d ...

Is there a way to enforce mandatory fields on material-table?

During my current project, I am utilizing a material-table interface to perform CRUD operations. I am interested in finding out if there is a way to make certain fields required when necessary. Despite my research efforts yielding minimal results, I have ...

Discover multiple keys within a new Map object

Our usual approach involves creating a new Map like this: const hash = new Map() hash.set(key,value) To retrieve the information, we simply use: hash.get(specificKey) An advantage of using Map is that we have flexibility in choosing keys and values. Cur ...

Transforming a canvas into a div element

Hey there, I'm looking to swap out one canvas for another but I'm not sure how it will look on the browser. Any help would be greatly appreciated. <div id="juego"> <canvas width="203" height="256" id="1" class="bloque"></canvas& ...

Choose an element that has been generated dynamically using jQuery

Here is an example HTML table to work with: <table id="#myTable"> <tr id="#row123"><td>Content</td></tr> </table> To insert a new row using jQuery, you can use the following code: $('#myTable').prepend(&ap ...

PHP cannot be utilized within the script tag

I'm currently using JavaScript to display an error message If a user inputs incorrect information and I add the following code: <?php $_POST["usernamereg"] ?> = usernamereg; the alert function stops working. However, if I remove this code, t ...

Changing a URL parameter based on the element's width is a simple task when

I'm trying to display elements on a page by replacing a string in the URL parameter with the width of each element of a certain class. I'm new to JavaScript, so any help would be appreciated! Here's an example of the HTML for objects on the ...

Exploring the benefits of using Styled Components for creating global styles in React and Next.js: Should you opt for a mix of CSS files and Styled Components?

Recently, I implemented Styled Components in my Next.js app by following the guidelines from Styled Components. Currently, I am delving into the realm of best practices for managing global styles with Styled Components. The first aspect that piques my curi ...