Develop Reference

Vuejs page won't load when dynamic router link is clicked

I'm using VueJs 2 with Laravel 7. I have the following code which should swap out a dynamically created page when you click next or previous. It will change the URL perfectly fine but the page won't change and I'm not sure where I went wrong.
Here are the links:
<div class="row">
<div class="col-4 offset-2">
<router-link :to="{name: 'question', params: {question: index -1 }, query: {question: index - 1 }}">
<div v-if="index > 0" class="btn btn-primary">Previous</div>
</router-link>
</div>
<div class="col-4">
<router-link :to="{name: 'question', params: {question: index + 1 }, query: {question: index + 1 }}">
<div v-if="index < questions.length" class="btn btn-primary">Next</div>
</router-link>
</div>
</div>
The router tag:
<router-view
:key="$route.params.question"
:index="pageNumber + 1"
:header="header"
:questions="questions"
v-on:sectionScore="sectionScoreChange"
:colour="colours[index % colours.length]"
>
</router-view>
The route in web.php
Route::get('/{any?}', 'QuestionnaireController#index')->where('any', '.*');
and finally the route in vue router:
const routes = [
{
path: '/question/:question',
name: 'question',
component: Questions,
}
];
If it helps, when you click the router links to change the URL and press refresh, it will indeed swap the page, it just doesn't do it automatically.

Passing json data from one vue page to another vue page and render the chart

I am traversing a json data inside a table in vue and passing some of it to a different page using router link.
Projects.vue
<tbody class>
<tr v-for="project in projects" aria-rowindex="1" class>
<td aria-colindex="1" class>{{project.name}}</td>
<td aria-colindex="2" class>{{project.date}}</td>
<td aria-colindex="3" style="width: 100px">
<router-link to={name: 'Performance', params: {{project.Line_base}} }>
<i class="fa fa-eye"></i>
</router-link>
<i class="fa fa-edit"></i>
<i class="fa fa-remove icons" style="color: red"></i>
<i class="fa fa-share-alt"></i>
</td>
<!-- <td aria-colindex="4" class>{{project.short_description}}</td> -->
</tr>
import axios from 'axios';
import Performance from "./Performance";
export default {
components: {
Performance
},
name: "builder-basic",
data() {
return {
projects: []
};
},
mounted () {
axios
.get('http://some.api.net/v1/projects/')
.then(response => (this. projects = response.data.entities))
},
};
</script>
This project.Line_base is an array of integers, that I want to pass to
Performance.vue
<template>
<div class="animated fadeIn">
<b-card header-tag="header" footer-tag="footer">
<div slot="header">Performance - Models vs Baseline</div>
<div class="card-body" >
<div class="chart-wrapper" >
<b-card header="Lift Chart" >
<div class="chart-wrapper">
<line-example chartId="chart-line-01" :styles="chartStyle" />
</div>
</b-card>
</div>
</div>
<div class="card-body" >
<div class="chart-wrapper">
<b-card header="Accuracy & Sensitivity" >
<bar-example chartId="chart-bar-01" :styles="chartStyle" />
</b-card>
</div>
</div>
</b-card>
</div>
</template>
<script>
import axios from "axios";
import LineExample from "./charts/LineExample";
import BarExample from "./charts/BarExample";
export default {
name: 'Performance',
components: {
LineExample,
BarExample
},
computed: {
chartStyle () {
return {
height: '500px',
position: 'relative'
}
}
}
}
};
</script>
I have the index.js where I have mentioned the routers, which are working well if I am not passing any data to performance, from where I will generate a graph using charts.
index.js
let router = new Router({
mode: 'hash', // https://router.vuejs.org/api/#mode
linkActiveClass: 'open active',
scrollBehavior: () => ({ y: 0 }),
routes: [
{
path: '/',
redirect: '/dashboard',
name: 'Home',
component: DefaultContainer,
children: [
{
path: 'Performance',
name: 'Performance',
component: Performance
}])
The data is not being passed, I followed some of the articles already discussed on stack overflow

Send the params like this;
<router-link :to="{name: 'Performance', params: { Line_base: project.Line_base }}">
<i class="fa fa-eye"></i>
</router-link>
In your Performance.vue Component you need to get de params from the route like this.
computed: {
lineBase () {
return this.$route.params.Line_base
}
}

It seems like you are making a syntaxerror. This the example from the vue router docs:
<!-- named route -->
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
Further on in the docs it specifies router-link properties, stating:
route.params
type: Object
An object that contains key/value pairs of dynamic segments and star
segments. If there are no params the value will be an empty object.
Compare that to your code:
<router-link to={name: 'Performance', params: {{project.Line_base}} }>
It seems you are forgetting the semicolon before to (which is shorthand for v-bind:to. Without that whatever comes after will just be passed as a string rather than a javascript expression. This should help.
You could try rewriting to:
<router-link :to="{name: 'Performance', params: {Line_base: project.Line_base} }">
Hope that helps!
EDIT: added clarification

Vue-Router only works on some routes

My vue-router routes the URL on all menu buttons correctly, but does not show each Vue component properly. A demonstration can be found here.
Inside of my HTML (I am using Vuefy)
<div class="navbar-start">
<a class="navbar-item">
<router-link to="/" class="router-link"> // <-- THIS WORKS
Home
</router-link>
</a>
<a class="navbar-item">
<router-link to="/items" class="router-link"> // <-- THIS WORKS
My Products
</router-link>
</a>
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link">
<router-link to="/information" class="router-link"> // <-- DOES NOT WORK
Info
</router-link>
</a>
<div class="navbar-dropdown is-boxed">
<a class="navbar-item">
<router-link to="/about" class="router-link"> // <-- THIS WORKS
About
</router-link>
</a>
<a class="navbar-item">
<router-link to="/terms" class="router-link"> // <-- DOES NOT WORK
Terms
</router-link>
</a>
</div>
</div>
</div>
My router.js file is set up the following:
import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/about',
name: 'about',
component: () => import('./views/About.vue')
},
{
path: '/new',
name: 'create-item',
component: () => import('./views/CreateItem.vue')
},
{
path: '/',
name: 'home',
component: Home
},
{
path: '/items',
name: 'my-items',
component: () => import('./views/MyItems.vue')
},
{
path: '/signin',
name: 'sign-in',
components: () => import('./views/SignIn.vue')
},
{
path: '/terms',
name: 'terms',
components: () => import('./views/Terms.vue')
},
{
path: '/information',
name: 'info',
components: () => import('./views/Info.vue')
}
]
})
Additionally, my App.vue file shows the router-view properly, along with the menu.
<template>
<div id="app">
<div id="nav">
<Menu/>
</div>
<router-view/>
</div>
</template>
<script type="text/javascript">
import Menu from '#/components/Menu.vue'
export default {
components: {
Menu
}
}
</script>
The following is a photograph of my navigation. To repeat, clicking on 'info' and 'terms' (submenu of info) do not load their respective Vue components, but does change the URL.
I triple-checked my syntax and checked the documentation, but could not seem to find my error. The platform at which my code is hosted at can be found here. Any help would be appreciated. Thanks, Edwin.

I found the error. I spelled 'component' instead of 'components' several times in my routes.js file.

Angular 4 Children router not loading

In my application I had three components that I used to show with router.
export const routing = RouterModule.forRoot([
{ path: '', component: HomeListComponent },
{ path: 'badge', component: BadgeListComponent},
{ path: 'badge-form', component: BadgeFormComponent },
{ path: 'badge-form/:id', component: BadgeFormComponent }
]);
Because I wanted to have something like this /badge/badge-form in url instead of /badge-form when I go to the form I changed my routing config to :
{ path: '', component: HomeListComponent },
{
path: 'badge',
component: BadgeListComponent,
children: [
{ path: 'badge-form', component: BadgeFormComponent },
{ path: 'badge-form/:id', component: BadgeFormComponent }
]
}
Unfortunately it's not working and I can't manage to find why, it's always loading the BadgeListComponent even if I go to the /badge/badge-form url.
HTML code for BadgeListComponent :
<div class="material-card-wide mdl-card mdl-shadow--2dp">
<div class="mdl-card__title mdl-card--border">
<h2 class="mdl-card__title-text">{{ title }}</h2>
</div>
<div class="list-card-body">
<table class="data-table-format">
<thead>
<tr>
<th>badgeNumber</th>
<th>authorizationLevel</th>
<th>endOfValidity</th>
<th></th>
</tr>
</thead>
<tbody>
<tr *ngFor="let badge of pagedItems" (click)="editBadge(badge.badge_badgeNumber)">
<th>{{ badge.badge_badgeNumber }}</th>
<th>{{ badge.badge_authorizationLevel }}</th>
<th>{{ badge.badge_endOfValidity }}</th>
<td width="5%" (click)="deleteConfirmation(badge.badge_badgeNumber); $event.stopPropagation();">
<i class="material-icons delete-data-icon">delete_forever</i>
</td>
</tr>
</tbody>
</table>
</div>
<!-- pager -->
<div class="mdl-paging" *ngIf="pager.pages && pager.pages.length">
<button [disabled]="pager.currentPage === 1"
class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon"
(click)="setPage(pager.currentPage - 1)">
<i class="material-icons">keyboard_arrow_left</i>
</button>
<a *ngFor="let page of pager.pages"
[class.selected]="pager.currentPage === page"
class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon"
(click)="setPage(page)">
{{ page }}
</a>
<button [disabled]="pager.currentPage === pager.totalPages"
class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon"
(click)="setPage(pager.currentPage + 1)">
<i class="material-icons">keyboard_arrow_right</i>
</button>
<br />
<span class="paginationStats">Pages {{ pager.startPage }}-{{ this.pager.endPage }} of {{ pager.totalPages }}</span>
</div>
<div class="mdl-card__actions mdl-card--border">
<div class="buttonHolder">
<button routerLink="../badge-form" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--primary" *ngIf="!editing">
Add
</button>
</div>
</div>
</div>

When you navigate to /badge/badge-form, your current configuration tells Angular Router to render the BadgeListComponent by matching /badge, then render BadgeFormComponent within BadgeListComponent's <router-outlet>.
You need a componentless route to only render the children.
{ path: '', component: HomeListComponent },
{
path: 'badge',
children: [
{ path: '', component: BadgeListComponent },
{ path: 'badge-form', component: BadgeFormComponent },
{ path: 'badge-form/:id', component: BadgeFormComponent }
]
}

Is there any errors in your BadgeFormComponent? It may be blocking the transition between components and let you stick in the parent component BadgeListComponent.
By the way, I suggest you to switch the children routes like this:
...
children: [
{ path: 'badge-form/:id', component: BadgeFormComponent },
{ path: 'badge-form', component: BadgeFormComponent }
]
...
Because Angular Router takes the first route that matches one of the paths. Since you have paths with and without parameter, I guess parameter is optional.
Let me know if you have some issues in your BadgeFormComponent.

Angular 2 Full Reload on router.navigate

I'm having an issue with doing a redirect following a form submission for logging in on Angular 2. The application performs a full reload on the redirect to dashboard. I have checked several posts on stack overflow & other blogs, with no luck. This is the closest one; However, there is no answer on the thread. See my code below.
After I press the login, the page loads, and then reloads again. The URL is also changing to put the query string in the URL, which I suspect is causing the issue. How can I fix this issue? I suspect is has something to do with the way my form is set up.
auth.component.ts
import { Component, OnInit, ViewChild } from '#angular/core';
import { NgForm, FormBuilder, Validators } from '#angular/forms';
import { Router } from '#angular/router';
import { User } from '../shared/user';
declare var Materialize:any;
import { AuthService } from '../shared/services/auth.service';
#Component({
moduleId: module.id,
selector: 'logon',
templateUrl: 'auth.component.html',
})
export class AuthComponent implements OnInit {
currentUser = new User(null, '', '', '', '', 'vistor');
submitted = false;
authForm: NgForm;
#ViewChild('authForm') currentForm: NgForm;
constructor(
private router: Router,
public authService: AuthService
) { }
ngOnInit(): void {
}
onSubmit() {
this.submitted = true;
this.authService.login(this.currentUser).then(response => {
if (response) {
this.goToDashboard();
} else {
var toastContent = '<span><b>Invalid email or password!</b></span>';
Materialize.toast(toastContent, 5000, 'red');
}
});
}
goToDashboard() {
this.router.navigate(['dashboard']);
}
}
auth.component.html
<div class="container">
<div class="card">
<div class="card-content">
<span class="card-title">Logon</span>
<form materialize #authForm="ngForm" class="col s12">
<div class="input-field col s12">
<input required class="validate" id="email" type="email" name="email" [(ngModel)]="currentUser.email" #email="ngModel" validate="email">
<label for="email" data-error="Invalid Email">Email</label>
</div>
<div class="input-field col s12">
<input required class="validate" id="password" type="password" name="password" [(ngModel)]="currentUser.password" #password="ngModel" validate="password">
<label for="password" data-error="Invalid Password">Password</label>
</div>
<div class="card-action">
<button [disabled]="!authForm.form.valid" (click)="onSubmit()" class="btn orange darken-1 waves-effect waves-light" type="submit">Log In
<i class="material-icons right">send</i>
</button>
</div>
</form>
</div>
</div>
</div>
Angular 2 Routes
const routes: Routes = [
{ path: '', redirectTo: '/auth', pathMatch: 'full' },
{ path: 'dashboard', component: DashboardComponent },
{ path: 'spelling', component: SpellingComponent },
{ path: 'definition', component: DefinitionComponent },
{ path: 'auth', component: AuthComponent },
{ path: '**', redirectTo: '/dashboard', pathMatch: 'full' }
];

Don't use the type as submit in Angular Single Page applications. The reason might be
<button [disabled]="!authForm.form.valid" (click)="onSubmit()" class="btn orange darken-1 waves-effect waves-light" type="submit">Log In
<i class="material-icons right">send</i>
</button>
Try using
<button [disabled]="!authForm.form.valid" (click)="onSubmit()" class="btn orange darken-1 waves-effect waves-light" type="button">Log In
<i class="material-icons right">send</i>
</button>

Angular 2 needs an order in paths to show the correct routing, I think the solution is related with the order of paths. For example, you can try this:
const routes: Routes = [
{ path: '', redirectTo: '/auth', pathMatch: 'full' },
{ path: 'auth', component: AuthComponent },
{ path: 'dashboard', component: DashboardComponent },
{ path: 'spelling', component: SpellingComponent },
{ path: 'definition', component: DefinitionComponent },
{ path: '**', redirectTo: '/dashboard' }
];
and
goToDashboard() {
this.router.navigate(['dashboard/']);
}