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?
Related
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>
In my template, I have
<ul class="nav nav-pills nav-fill">
<li class="nav-item">
<router-link
:to="{
name: 'ConversationDetailHighlights',
params: {
id: conversation.id
}
}"
class="nav-link"
active-class="active"
v-bind:class="{active: currentlyActive === 'ConversationDetailHighlights'}"
>Highlights</router-link>
</li>
<li class="nav-item">
<router-link
:to="{
name: 'ConversationDetailFullTranscript',
params: {
id: conversation.id
}
}"
class="nav-link"
active-class="active"
v-bind:class="{active: currentlyActive === 'ConversationDetailFullTranscript'}"
>Full Transcript</router-link>
</li>
</ul>
And in my script:
data() {
return {currentlyActive = 'ConversationDetailHighlights'}
}
watch: {
$route(to) {
this.currentlyActive = to.name;
}
},
mounted() {
this.currentlyActive = this.$route.name;
},
However, when I click the Transcript, both li's are active. How do I get the highlights one to become inactive?
You are doing this far too complicated. vue-router already contains all you need to set a css-class on the active <router-link> components.
To quote from Getting Started
Notice that a automatically gets the .router-link-active class when its target route is matched. You can learn more about it in its API reference.
So all you need to do is style the .active css-class that you chose with the active-class prop.
Note that multiple routes may match at any one time. E.g. / will always match. In that case you should put the exact attribute:
<router-link to="/" exact active-class="active" />
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}
};
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.
I have problem with my child routing in Angular 4. It isn't working while the parent routing is working. When i hover over the "Create New Account", it still is on the Account. It shows localhost:4200/account. It must be localhost:4200/account/create-account. The Parent route is on app.component.ts while the child route is on the account.component.html
//sidebar.component.ts
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li routerLinkActive="active" class="dropdown" appDropdown><a style="cursor: pointer;" routerLink="/account">Account</a>
<ul class="dropdown-menu">
<li><a style="cursor: pointer;">Create New Account</a></li>
<li><a style="cursor: pointer;">View Account</a></li>
</ul>
</li>
<li routerLinkActive="active"><a routerLink="/news">News</a></li>
</ul>
//app-routing.module.ts
import{ NgModule } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import { AccountComponent } from './account/account.component';
import { CreateAccountComponent } from './account/create-account/create-account.component';
import { ViewAccountComponent } from './account/view-account/view-account.component';
import { AccountStartComponent } from './account/account-start/account-start.component';
import { NewsComponent } from './news/news.component';
const appRoutes: Routes = [
{ path: '', redirectTo: '/account', pathMatch: 'full' },
{ path: 'account', component: AccountComponent, children: [
{ path: '', component: AccountStartComponent },
{ path: 'create-account', component: CreateAccountComponent },
{ path: 'view-account', component: ViewAccountComponent },
]},
{ path: 'news', component: NewsComponent }
];
#NgModule({
imports: [RouterModule.forRoot(appRoutes)],
exports: [RouterModule]
})
export class AppRoutingModule {
}
//app.component.ts
<app-header></app-header>
<app-sidebar></app-sidebar>
<router-outlet></router-outlet>
//account.component.html
<div>
<router-outlet></router-outlet>
</div>
You need to configure the routerLink
<li><a style="cursor: pointer;" routerLink="./create-account">Create New Account</a></li>