The initialization process of Vue.js router is compatible with router.map, but not with the Router constructor

I'm experiencing an issue in my app where routes work fine when I use router.map({}) with the vue-router, but they fail to work when I pass them directly in the constructor. Any insight into why this might be happening?

// Routes that work:
const router = new VueRouter() 
router.map({
    '/user' : {
        component : User,
        subRoutes : {}
    }
})

// Routes that do not work:
const router = new VueRouter({
    routes : [
        {
            path : '/user',
            component : User,
            children : []
        }
    ]
})

Answer №1

Currently, there are two versions of Vue Router available.

The first version is Vue Router 0.7.x, which is compatible with VueJS 1.x.x. Based on the example you provided, it seems like your application is running Vue Router 0.7.x syntax, therefore likely using VueJS 1.x.x.

The second version is Vue Router 2.x, designed to work with VueJS 2.x.x. The non-functional example you mentioned corresponds to Vue Router 2.x syntax.

It's essential to confirm the specific VueJS version your app is utilizing and then choose the appropriate Vue Router Version that matches, while also following the correct syntax guidelines.

Documentation for Vue Router 2.x.x can be found at - https://router.vuejs.org/en/ For Vue Router 0.7.x, refer to - https://github.com/vuejs/vue-router/tree/1.0/docs/en

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 regular expression should be used to meet the following requirement in JavaScript?

Criteria: Find words that begin with 'a' and end with 'b', with a digit in the middle, but are not on lines starting with '#' Given string: a1b a2b a3b #a4b a5b a6b a7b a8b a9b Expected output: a1b a2b a3b a7b a8b ...

Setting a dynamic default value for a Combobox using React Widgets

Currently delving into the world of javascript, I am working on creating a web client that showcases data from a database. Utilizing react.js and integrating react-widgets for some user-friendly widgets. One widget in particular, the combobox, pulls its da ...

What is the best way to transform this unfamiliar CSS element into JavaScript code?

I'm facing an issue where I want to animate a CSS image based on time constraints, but since it's in CSS, I'm unable to achieve the desired effect. The animation in question is not the sun itself, but rather a yellowish half-circle animation ...

How can I efficiently load AJAX JSON data into HTML elements using jQuery with minimal code?

I have successfully implemented a script that loads an AJAX file using $.getJSON and inserts the data into 2 html tags. Now, I want to expand the JSON file and update 30 different tags with various data. Each tag Id corresponds to the key in the JSON strin ...

"Troubleshooting the issue of AngularJS $http patch request failing to send

The information is successfully logged in the console when passed to replyMessage, but for some reason, the API does not seem to be receiving the data. Is the input field perhaps empty? replyMessage: function(data) { console.log(data); ...

How can I extract data from the 'ngx-quill' editor when integrating it with a FormBuilder in Angular?

After implementing the 'ngx-quill' editor package in my Angular 15 project, I encountered an issue where the value of the content form control was returning 'null' upon form submission using FormBuilder. Despite entering text such as he ...

Utilize the <a> element as a button to submit the data form

I am looking to transfer data from a form to another PHP page without using a button within the form itself. Instead, I have placed a separate button outside of the form for submission. How can I achieve this by sending the form data to the other page? Bel ...

Tips for saving data after reading lines in Node.js

I am working on a project where I need to read data from an external text file into my function. How can I efficiently store each line of the file as a separate variable? const fs = require("fs"); const readline = require("readline"); const firstVariable ...

Logging out of Laravel after sending a POST request

I'm developing a laravel application that heavily relies on POST requests. One common type of request in my app looks like this: var classElements = document.querySelectorAll("tr.ui-selected td.filename"); var csrf = $('input[name=_token]') ...

Toggle visibility of columns in real-time using a bootstrap-vue element alongside Bootstrap 3

Currently, I am attempting to dynamically show/hide elements within a bootstrap-vue table (). Thus far, my efforts have only resulted in hiding the header while the cells remain visible. This creates an issue as the cell placement does not align correctly ...

Mapping an array in ReactJS based on the specific order of another array

In my experience with Unmitigated, the answer proved beneficial. If you're arriving from a Google search, please scroll down for more information. Order: [ "567", "645", "852", "645", "852", "852 ...

What could be causing my select tags to appear incorrectly in Firefox and IE?

With the help of Jquery, my goal is to dynamically populate a select field when it is in focus, even if it already has a value. Once populated, I want to retain the previous value if it exists as an option in the newly populated field. Although this works ...

Finding all items in an array in Cypress and validating them using JavaScript assertions

After making an API call, I have received an array response that includes the following information: [ { "IsDatalakeEnabled": true, "RecoveryHr": { "IsRecoveryHREnabled": false, &quo ...

The Backbone Model is producing unspecified data

Having crafted a backbone model, it looks like this: var note_model = Backbone.Model.extend({ default : { HistoryKey : "", InsertDate : "", MemberKey : "", NoteDate : "", ContactNote : "", User ...

Reverting to the original order in jQuery DataTables after dropping a row

Recently, I've been attempting to utilize jQuery DataTables in conjunction with the Row Ordering plugin. At first, everything seemed to be functioning properly until a javascript error popped up indicating an unrecognized expression. After researching ...

Issues with Contenteditable functionality in JavaScript

My goal is to make a row editable when a button is clicked. $(":button").click(function(){ var tdvar=$(this).parent('tr').find('td'); $.each(tdvar,function(){ $(this).prop('contenteditable',true); }); }); <s ...

Incorporating a dynamic HTML editing button to every new row in a table using JavaScript

My application features a form that allows users to dynamically add new rows to a table using JavaScript: // Function to add a new account row if (tit.innerHTML === "Add Account"){ var table = document.getElementById(tableId); var row = table ...

Issues arising from using Android Studio in conjunction with Quasar framework

I am currently working with quasar and I attempted to start the project using these commands: quasar build -m capacitor -T android quasar dev -m capacitor -T android Unfortunately, when I entered the first command, I encountered this error: FAILURE: Build ...

Enhanced coding experience with JavaScript completion and ArangoDB module management

Exploring New Horizons After more than a decade of using Eclipse for Java development, I have decided to delve into the realms of javascript and arangodb due to high demand. My current task involves developing multiple microservices to run within arangodb ...

Are there any straightforward methods to fully freeze an object along with all its descendants in JavaScript (Deep Freeze)?

Often when passing an object as a parameter, functions may access the object by reference and make changes to the original object. This can sometimes lead to unwanted outcomes. Is there a way to ensure that an object remains unchanged? I am aware of the Ob ...