What is the method to integrate Vue Router into my Vue UI project?

I am having trouble setting up Vue routing with the Vue UI. I have two components, Start and Clubs, but I keep getting errors stating that the modules cannot be found. Both components are located in src > components > directory. I have gone through documentation and tutorials with different syntax variations, but I still can't get it to work. Any assistance would be appreciated.

Here is my current main.js:

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'

import Start from './Start.vue'
import Clubs from './Clubs.vue'

Vue.use(VueRouter);

const routes = [
    { path: '/', components: Start },
    { path: '/clubs', components: Clubs }
];

const router = new VueRouter ({
     routes: routes
});

new Vue({
  el: '#app',
  routes,
  render: h => h(App)
});

Answer №1

Make sure to adjust your code between lines 10-13 according to the following instructions. Instead of using the key components, it should be component

const pages = [
  { path: "/", component: Homepage },
  { path: "/about", component: AboutPage }
];

Also, remember to replace pages with router in line 21

const website = new Vue({
  el: "#website",
  router, // not 'pages'
  render: h => h(MainApp)
});

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

disable the react .hover behavior once clicked

Can someone help me figure out why my attempt to cancel the .hover on function using .off is not working? $("document").ready(function(){ $("button").hover(function(){ $("h1").hide(); }, function(){ ...

An issue arises in Slate.js when attempting to insert a new node within a specified region, triggering an error

A relevant code snippet: <Slate editor={editor} value={value} onChange={value => { setValue(value); const { selection } = editor; // if nothing is currently selected under the cursor if (select ...

Stop a hacker from obtaining the usernames from a system

Our forgot password page has been identified with a security issue that needs attention: ISS-0003938 Web Inspect Open Medium Suspicious Files Found in Recursive Directory ****** Remove any unnecessary pages from the web server If any files are nec ...

How can the Node app utilize an HTML page to reference another JavaScript file? Ran into an unexpected syntax error: `Uncaught SyntaxError: Unexpected token '<

I'm trying to figure out how to call another script from an HTML page that is being served by my node project's localhost server. Here's the basic setup: index.js var http = require('http'); var fileSystem = require('fs' ...

Implementing Auto-complete Functionality with Tagify in C# ASP.Net using jQuery

I'm currently utilizing Tagify, a tool that utilizes jQuery Autocomplete, references : <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquer ...

How can we create a JavaScript function that compares the value in an object with the value selected in an HTML dropdown menu?

Looking to develop an innovative NFL playoffs bracket with dynamic functionality using javascript. Unlike a typical tournament bracket, the match-ups in rounds 2 and 3 will be determined by the teams' ranks. To achieve this, I have created a comprehen ...

Instruments for crafting an application compatible with a wide range of web browsers

Currently tackling various browser challenges. I find myself wondering whether it's achievable to create an application that is compatible with all browsers, or at least the majority. Should it be a web application? Any recommendations on frameworks a ...

Change the background color of a specific view in Vue.js

Currently, I am utilizing Vue along with Vuetify. I am looking to implement alternating background colors in a single view file. So far, I have attempted using <section id="protocol" class="ivory" > .. ...

The "maxfilesexceeded" event in dropzone.js does not seem to be triggered when adding files programmatically

In my Vue.js project, I am using dropzone with the maxFiles: 1 option set. To display an existing file from the server in dropzone, I have added the following code: let mockFile = { name: 'Filename', size: file.size }; myDropzone.emit('added ...

Is it possible to implement Ajax functionality in JavaScript without using XMLhttp and connection the same socket for every request?

Can data on a page be communicated and updated without the need for reloading, all while avoiding the XMLHttpRequest object and using the same connection or socket for each request (without closing the connection each time)? ...

Using AngularJS to access a method in a parent scope from within a directive

In my Angular application, I am utilizing ui-grid. I am looking to implement a custom action on a cell within the grid that will trigger a method from my app. Essentially, this involves calling a method located higher up in the parent hierarchy from a dire ...

What is the best way to initialize a Bootstrap collapsed target as already collapsed upon page load?

I've come across this question multiple times but after reading over 10 posts, I'm still struggling to understand how to initiate my row in a collapsed state and have it expand upon clicking. <table class="soloduoquadtable"> ...

Remove the session variable when a JavaScript function is triggered

After creating a function called destroy(), I have set it to be called on the onclick event of the logout button. However, the issue is that the server-side code within that function is always executed when the page loads, regardless of whether the logou ...

We are sorry, but we are unable to determine the correct file format of the

My code splits file formats when I click save after uploading a document. For images, the format is data:image/jpeg. For PDF files, it's data:application/pdf. An issue arises when uploading .txt files as they are showing up as data:text/plain inste ...

Align a specified number of v-col components to the center within a Vuetify grid, with additional spacing

Struggling to center a specific number of v-cols with equal spacing on the left and right sides, while also aligning them horizontally with other v-cols. The responsiveness is working fine, but I want to limit it to two v-cols at maximum screen size, align ...

Creating React components through the use of the map function

Utilizing the hackernews api, I am attempting to extract the "data" property from my response object in order to display each story title individually on the browser. Initially, the data is structured as an array of id's representing individual storie ...

Can you explain the {| ... |} syntax in JavaScript to me?

While reviewing a javascript codebase, I stumbled upon a section of code that appears as follows: export type RouteReducerProps = {| error?: Error, isResolving: boolean, isResolved: boolean, hasFailed: boolean, |}; Upon closer inspection, it seem ...

Value of the object is currently not defined

Having difficulty determining values in a manner that allows for later accessibility. When defining Search first, Search.commands[3] becomes undefined. On the other hand, defining commandList first results in commandList.commands[0] being undefined. Is t ...

Unable to Modify TextField Component in React

Is it possible to attach variables to TextField and have those variables deleted as a whole and not editable? Check out the Codesandbox example HERE code <CardContent> <Autocomplete value={values.variable} options={variables} ...

The specified type does not meet the constraint as it lacks the required index signature

I'm currently working on refactoring a TypeScript project that utilizes React Hooks. While I have some knowledge of TypeScript, I am still more of a beginner than an expert. My main goal is to create reusable code for this project through the use of ...