Develop Reference

Can not retrieve component template while routing

I am using Vuejs. This is main js:
import Vue from 'vue'
import App from './App.vue'
import router from './router'
Vue.config.productionTip = false;
new Vue({
render: h => h(App),
router
}).$mount('#app')
This is router:
import Vue from 'vue';
import VueRouter from 'vue-router';
import ControlExcel from './components/ControlExcel';
import Login from "./components/Login";
import blog from './components/blog';
import file from './components/file';
Vue.use(VueRouter);
let routes = [
{
path: '/control-excel',
name: 'ControlExcel',
component: ControlExcel
}
,
{
path: '/loginn',
component: Login
}
,
{
path: '/blog',
name: 'blog',
component: blog
}
,
{
path: '/file',
name: 'file',
component: file
},
];
export default new VueRouter({
mode: 'history',
base: "",
routes
})
and this app vue:
<template>
<div id="app">
<!-- <img alt="Vue logo" src="./assets/logo.png">-->
<!-- <HelloWorld msg="Welcome to Your Vue.js App"/>-->
<!-- <ControlExcel />-->
<!-- <component v-bind:is="component" />-->
<span>abcd</span>
<li class="nav-item">
<router-link class="nav-link" to="/control-excel">exce</router-link>
</li>
<li class="nav-item">
<router-link class="nav-link" to="/loginn">loginn</router-link>
</li>
<li class="nav-item">
<router-link class="nav-link" to="/blog">blog</router-link>
</li>
<li class="nav-item">
<router-link class="nav-link" to="/file">file</router-link>
</li>
</div>
</template>
<script>
// import HelloWorld from './components/HelloWorld.vue'
// import Login from './components/Login.vue'
// import ControlExcel from "./components/ControlExcel";
// import Login from "./components/Login";
import file from './components/file';
import Vue from 'vue';
Vue.component('file',file);
// import DownloadExcel from './components/DownloadExcel'
export default {
name: 'app',
components: {
// Login,
// ControlExcel,
}
,
data() {
return {
// component: "Login"
}
}
}
</script>
At localhost:8080, i see those:
abcd
exce
loginn
blog
file
When i click any of them, URl changes. for example
http://localhost:8080/file
for file but it does not bring component.
for example for file:
{
path: '/file',
name: 'file',
component: file
},
that component file.vue
<template>
<div class="blog">
<h1>fasfsasd</h1>
</div>
</template>
<script>
export default{
name:'file'
}
</script>
<style scoped>
</style>
This is directory:
src
-components
--blog.vue
--ControlExcel.vue
--file.vue
--Login.vue
router.js
main.js
App.vue
Why cant it bring template also?
There is dynamic component but i dont want to use it and it does not seem best practice, like this:
<component v-bind:is=”currentComponent”></component>
https://blog.logrocket.com/how-to-make-your-components-dynamic-in-vue-js/

Your Vue-Router does not change the main component, but only puts the component of the URL that matches into <router-view></router-view>, which you don't have.
You need to add it to your main component.
For example like this:
<div id="app">
<span>abcd</span>
<ul>
<li class="nav-item">
<router-link class="nav-link" to="/control-excel">exce</router-link>
</li>
<li class="nav-item">
<router-link class="nav-link" to="/loginn">loginn</router-link>
</li>
<li class="nav-item">
<router-link class="nav-link" to="/blog">blog</router-link>
</li>
<li class="nav-item">
<router-link class="nav-link" to="/file">file</router-link>
</li>
</ul>
<router-view></router-view>
</div>

Vue component won't load: did you register the component correctly?

My router has:
export default new Router({
mode: 'history',
base: process.env.BASE_URL,
routes: [{
path: '/',
name: 'login',
component: Login,
},
{
path: '/app',
component: Container,
children: [{
path: '',
name: 'home',
component: Home
}]
},
],
});
My Container.vue has:
<template>
<div>
<Navigation />
<router-view />
</div>
</template>
<script>
import Navigation from "./Navigation.vue";
export default {
name: "Container",
props: {
msg: String
}
};
</script>
But I get an error:
Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.
found in
---> at src/components/Container.vue
at src/App.vue
In my Navigation.vue, I have
<template>
<nav class="nav nav-pills flex-column flex-sm-row">
<a class="flex-sm-fill text-sm-center nav-link active" href="#">Active</a>
<a class="flex-sm-fill text-sm-center nav-link" href="#">Longer nav link</a>
<a class="flex-sm-fill text-sm-center nav-link" href="#">Link</a>
<a
class="flex-sm-fill text-sm-center nav-link disabled"
href="#"
tabindex="-1"
aria-disabled="true"
>Disabled</a>
</nav>
</template>
<script>
export default {
name: "Navigation"
};
</script>

You're missing to add components:{Navigation} in Container.vue component
export default {
name: "Container",
props: {
msg: String
},
components:{Navigation}
};

Child router outlet works only one time

The router outlet works only the first time. No issues or errors. I have a child routing to one component.
Routing works correct URL is changing in a browser, but the component doesn't invoke the second time.
RouterModule.forChild([
{
path: '', component: InvestmentComponent, children: [
{ path: '', redirectTo: 'list', pathMatch: 'full'},
{ path: 'coin/:cointype/:hashaddress', component: MNWalletComponent },
]
},
])
component html:
<li class="nav-item">
<a class="nav-link" routerLinkActive="active" routerLink="coin/{{coins[0].coin.coinType}}/{{coins[0].hashaddress}}">
<appc-coin [coin]="coins[0].coin"></appc-coin>
</a>
</li>
<li class="nav-item">
<a class="nav-link" routerLinkActive="active" routerLink="coin/{{coins[1].coin.coinType}}/{{coins[1].hashaddress}}">
<appc-coin [coin]="coins[1].coin"></appc-coin>
</a>
</li>
<router-outlet></router-outlet>
What I do wrong?

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 2 Routing Refresh

I am trying to Implement Hashlocation Strategy out here it is not working please guide me.
This is My Angular & Router Version
Package.json
"#angular/common": "2.0.0",
"#angular/compiler": "2.0.0",
"#angular/core": "2.0.0",
"#angular/forms": "2.0.0",
"#angular/http": "2.0.0",
"#angular/platform-browser": "2.0.0",
"#angular/platform-browser-dynamic": "2.0.0",
"#angular/router": "3.0.0",
"#angular/upgrade": "2.0.0",
"bootstrap": "^3.3.6",
Main.ts
import { platformBrowserDynamic } from '#angular/platform-browser-dynamic';
import { AppModule } from './app.module'; platformBrowserDynamic().bootstrapModule(AppModule);
app.routes.ts
import { ModuleWithProviders } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import { HomeComponent } from './home/home.component';
import { UserListComponent } from './users/user-list.component';
import { ScheduleListComponent } from './schedules/schedule-list.component';
import { ScheduleEditComponent } from './schedules/schedule-edit.component';
const appRoutes: Routes = [
{ path: 'users', component: UserListComponent },
{ path: 'schedules', component: ScheduleListComponent },
{ path: 'schedules/:id/edit', component: ScheduleEditComponent },
{ path: '', component: HomeComponent }
];
export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes, { useHash: true });
app.modules.ts
import './rxjs-operators';
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { FormsModule } from '#angular/forms';
import { HttpModule } from '#angular/http';
import { LocationStrategy,HashLocationStrategy } from '#angular/common';
import { PaginationModule } from 'ng2-bootstrap/ng2-bootstrap';
import { Routes, RouterModule } from '#angular/router';
import { DatepickerModule } from 'ng2-bootstrap/ng2-bootstrap';
import { Ng2BootstrapModule } from 'ng2-bootstrap/ng2-bootstrap';
import { ModalModule } from 'ng2-bootstrap/ng2-bootstrap';
import { ProgressbarModule } from 'ng2-bootstrap/ng2-bootstrap';
import { SlimLoadingBarService, SlimLoadingBarComponent } from 'ng2-slim-loading-bar';
import { TimepickerModule } from 'ng2-bootstrap/ng2-bootstrap';
import { AppComponent } from './app.component';
import { DateFormatPipe } from './shared/pipes/date-format.pipe';
import { HighlightDirective } from './shared/directives/highlight.directive';
import { HomeComponent } from './home/home.component';
import { MobileHideDirective } from './shared/directives/mobile-hide.directive';
import { ScheduleEditComponent } from './schedules/schedule-edit.component';
import { ScheduleListComponent } from './schedules/schedule-list.component';
import { UserCardComponent } from './users/user-card.component';
import { UserListComponent } from './users/user-list.component';
import { routing } from './app.routes';
import { DataService } from './shared/services/data.service';
import { ConfigService } from './shared/utils/config.service';
import { ItemsService } from './shared/utils/items.service';
import { MappingService } from './shared/utils/mapping.service';
import { NotificationService } from './shared/utils/notification.service';
import { enableProdMode } from '#angular/core';
enableProdMode();
#NgModule({
imports: [
BrowserModule,
DatepickerModule,
FormsModule,
HttpModule,
Ng2BootstrapModule,
ModalModule,
ProgressbarModule,
PaginationModule,
routing,
TimepickerModule
],
declarations: [
AppComponent,
DateFormatPipe,
HighlightDirective,
HomeComponent,
MobileHideDirective,
ScheduleEditComponent,
ScheduleListComponent,
SlimLoadingBarComponent,
UserCardComponent,
UserListComponent
],
providers: [
ConfigService,
DataService,
ItemsService,
MappingService,
NotificationService,
SlimLoadingBarService,
{ provide: LocationStrategy, useClass: HashLocationStrategy }
],
bootstrap: [AppComponent]
})
export class AppModule { }
app.component.ts
import { Component, OnInit, ViewContainerRef } from '#angular/core';
// Add the RxJS Observable operators we need in this app.
import './rxjs-operators';
#Component({
selector: 'scheduler',
templateUrl: 'app/app.component.html'
})
export class AppComponent {
constructor(private viewContainerRef: ViewContainerRef) {
// You need this small hack in order to catch application root view container ref
this.viewContainerRef = viewContainerRef;
}
}
Index.html
<!DOCTYPE html>
<html>
<head>
<base href="/">
<meta charset="utf-8" />
<title>Scheduler</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<link href="bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet" />
<link href="bower_components/alertify.js/themes/alertify.core.css" rel="stylesheet" />
<link href="bower_components/alertify.js/themes/alertify.bootstrap.css" rel="stylesheet" />
<link rel="stylesheet" href="../assets/css/styles.css" />
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="bower_components/alertify.js/lib/alertify.min.js"></script>
<!-- 1. Load libraries -->
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<!-- 2. Configure SystemJS -->
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
</head>
<body>
<scheduler>
<div class="loader"></div>
</scheduler>
</body>
</html>
app.component.html
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<ng2-slim-loading-bar></ng2-slim-loading-bar>
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" [routerLink]="['/']">
<i class="fa fa-home fa-3x" aria-hidden="true"></i>
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="menuitem" *ngFor="let menuItem of MenuItemss" [value]="menuItem">
{{menuItem.module}}
{{menuItem.module}} <span class="caret"></span>
<ul class="dropdown-menu" *ngIf="menuItem.menus">
<li *ngFor="let submenu of menuItem.menus" [value]="submenu">
{{submenu.description}}
</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav">
<li>
<a [routerLink]="['/schedules']"><i class="fa fa-calendar fa-3x" aria-hidden="true"></i></a>
</li>
<li>
<a [routerLink]="['/customers']"><i class="fa fa-calendar fa-3x" aria-hidden="true"></i></a>
</li>
<li>
<a [routerLink]="['/customermaintenance']"><i class="fa fa-calendar fa-3x" aria-hidden="true"></i></a>
</li>
<li>
<a [routerLink]="['/users']"><i class="fa fa-users fa-3x" aria-hidden="true"></i></a>
</li>
<li>
<i class="fa fa-info fa-3x" aria-hidden="true"></i>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<a href="" target="_blank">
<i class="fa fa-facebook fa-3x" aria-hidden="true"></i>
</a>
</li>
<li>
<a href="" target="_blank">
<i class="fa fa-twitter fa-3x" aria-hidden="true"></i>
</a>
</li>
<li>
<a href="" target="_blank">
<i class="fa fa-github fa-3x" aria-hidden="true"></i>
</a>
</li>
<li>
<a target="_blank">
<i class="fa fa-rss-square fa-3x" aria-hidden="true"></i>
</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<br/>
<!-- Page Content -->
<div class="container">
<router-outlet></router-outlet>
</div>
<footer class="navbar navbar-fixed-bottom">
<div class="text-center">
<h4 class="white">
<a target="_blank">chsakell's Blog</a>
<i>Anything around ASP.NET MVC,Web API, WCF, Entity Framework & Angular</i>
</h4>
</div>
</footer>
You all know in angular 2 SPA when we refresh we get resource not found or 404 error to avoid i though of implementing the hashlocationstrategy but i am not successfull
kindly share your thoughts and guide me guys.
Thanks for all.

You only need to change on app.routes.ts
import { ModuleWithProviders } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import { HomeComponent } from './home/home.component';
import { UserListComponent } from './users/user-list.component';
import { ScheduleListComponent } from './schedules/schedule-list.component';
import { ScheduleEditComponent } from './schedules/schedule-edit.component';
const appRoutes: Routes = [
{ path: 'users', component: UserListComponent },
{ path: 'schedules', component: ScheduleListComponent },
{ path: 'schedules/:id/edit', component: ScheduleEditComponent },
{ path: '', component: HomeComponent }
];
export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes, {
useHash: true });
**Replace above code with below code**
import { ModuleWithProviders } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import { HomeComponent } from './home/home.component';
import { UserListComponent } from './users/user-list.component';
import { ScheduleListComponent } from './schedules/schedule-list.component';
import { ScheduleEditComponent } from './schedules/schedule-edit.component';
const appRoutes: Routes = [
{ path: '', redirectTo: 'users', pathMatch: 'full' },
{ path: 'users', component: UserListComponent },
{ path: 'schedules', component: ScheduleListComponent },
{ path: 'schedules/:id/edit', component: ScheduleEditComponent },
];
export const appRoutingProviders: any[] = [
];
export const routing = RouterModule.forRoot(appRoutes);