Here is my code
<ul>
<li> <a routerLink="/dashboard">Dashboard</a></li>
<li> <a routerLink="/price">Price</a> </li>
</ul>
and the routing part is
const routes: Routes = [
{ path: 'dashboard', component: DashboardComponent },
{ path: '', redirectTo: '/dashboard', pathMatch: 'full' },
{
path: 'price/:priceId',
component: PriceComponent,
children: [
{path: '', redirectTo:'kpi', pathMatch: 'full'},
{path: 'kpi', component: DashboardComponent},
{path: 'data', component: DashboardComponent},
]
}
];
here is the error that I got
ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'price'
Error: Cannot match any routes. URL Segment: 'price'
What is my mistake and how can I solve this. I want to do the nesting routing. on click on <li> <a routerLink="/price">Price</a> </li>. I want to open the http://localhost:4200/price/kpi default first child in nesting routing.
Related
I am trying to create a side menu (Dashboard's side menu with content) and I have to use multiple router-view.
First router-view is in App.vue that contains all the component.
<div id="app">
<router-view></router-view>
</div>
and the second router-view exists within above router-view as:
<div class="dashboard">
<Sidebar />
<div class="content">
<router-view name="content"></router-view>
</div>
</div>
According to below router/index.js code, if user visits / link, he will be redirected to dashboard page.
const routes = [
{
path: "",
name: "Dashboard",
component: dashboard,
},
{
path: "/messages",
name: "Messages",
components: {
content: Messages,
},
},
{
path: "/profile",
name: "Profile",
components: {
content: Profile,
},
},
{
path: "/settings",
name: "Settings",
components: {
content: Settings,
},
},
{
path: "/dashboard",
name: "Overview",
components: {
content: Overview,
},
},
];
and within above Sidebar component, there're links that upon clicking it shows the content of that link on right side (as in dashboard):
<div class="sidebar">
<div class="title">
Simple Sidebar
</div>
<div class="menu-items">
<router-link to="" active-class="active" tag="button" exact class="side-btn">
<div class="link-container">
Overview
</div>
</router-link>
<router-link to="/messages" active-class="active" tag="button" exact class="side-btn">
<div class="link-container">
Messages
</div>
</router-link>
// ....
</div>
</div>
for the second router-view I added a name as :
<router-view name="content"></router-view>
and then I identified it in router/index.js as:
{
path: "/messages",
name: "Messages",
components: {
content: Messages,
},
},
but it didn't work.
Can anyone help me debug and solve this issue, thank you in advance.
The nested route requires children route configs, which is missing from Dashboard's route config.
Move the route config of Messages into Dashboard's children array:
const routes = [
{
path: "",
name: "Dashboard",
component: dashboard,
children: [
{
path: "/messages",
name: "Messages",
components: {
content: Messages,
},
},
]
},
//...
]
I am using vue-router (and vuetify) to build my website. I have everything working great, but I would like to understand how to use the named routes instead of a path.
Here is a partial of my template as follows:
<v-list-item v-else :key="item.text" :to="item.to" link>
<v-list-item-action>
<v-icon>{{ item.icon }}</v-icon>
</v-list-item-action>
<v-list-item-content>
<v-list-item-title>
{{ item.text }}
</v-list-item-title>
</v-list-item-content>
</v-list-item>
...
Here is my data object:
data: () =>({
items: [
{icon: 'mdi-home', text: 'Home', to: '/'},
{icon: 'mdi-view-dashboard', text: 'Dashboard', to: '/dashboard'},
{
icon: 'mdi-chevron-up', 'icon-alt': 'mdi-chevron-down',
text: 'Locations',
model: false,
children: [
{
icon: 'mdi-map-marker',
text: 'Location One',
to: {name: 'location.show', params: {id: 1}} . // works perfectly
},
{
icon: 'mdi-map-marker',
text: 'Location Two',
to: {name: 'location.show', params: {id: 2}} . // works perfectly
},
],
},
],
}),
This is what I am trying to do:
{icon: 'mdi-view-dashboard', text: 'Dashboard', to: {name: 'dashboard'},
Instead of:
{icon: 'mdi-view-dashboard', text: 'Dashboard', to: '/dashboard'},
However, when I use the named route, Vuetify is applying the active class to the element. So, now all of my nav items are active.
How can I use the named route instead of a path? Thank you for any suggestions!
EDIT
Here is what my vue-router looks like:
{
path: "/dashboard",
name: "dashboard",
component: () =>
import(/* webpackChunkName: "dashboard" */ "../views/admin/Dashboard"),
meta: {requiresAuth: true}
},
{
path: "/location/:id",
name: "location.show",
component: () =>
import(/* webpackChunkName: "location.show" */ "../views/admin/location/Show"),
meta: {requiresAuth: true},
props(route) {
const props = {...route.params};
props.id = +props.id;
return props; // returns the param as a string
},
},
First of all, make sure that your route name is existing. Like below
export default [
{
path: '/admin/dashboard',
name: 'dashboard',
component: dashboard,
meta: {
title:'Dashboard'
}
},
]
So, in your items you can already use this one.
{icon: 'mdi-home', text: 'Home', to: {name: 'dashboard'}},
You should add the exact -prop to your list item. This way it will only apply the active class to the exact link.
<v-list-item v-else :key="item.text" :to="item.to" link exact>
<v-list-item-action>
<v-icon>{{ item.icon }}</v-icon>
</v-list-item-action>
<v-list-item-content>
<v-list-item-title>
{{ item.text }}
</v-list-item-title>
</v-list-item-content>
</v-list-item>
https://router.vuejs.org/api/#exact
I am new to vue and vue router and am using Vue router in history mode. The app contains a menu which is dynamically loaded
<router-link
tag="li"
class="link"
v-for="item in menu"
v-bind:key="item.id"
:to="item.slug"
:exact="item.slug === '/' ? true : false">{{ item.content }}
</router-link>
It works well as long as I stay in the parent routes like http://localhost:8080/posts As soon as I navigate a level deeper, e.g. to a post with the id 8 http://localhost:8080/posts/8 with a routerlink inside the Template
<router-link
tag="h2"
class="link"
:to="{ name: 'post', params: { id: post.id }}">
{{ post.title.rendered }}
</router-link>
it works in one way, but doesnt go back to the parent route when I click the main navigation links. Instead just adds the link of the main menu to the end of the route, e.g. instead of http://localhost:8080/posts
http://localhost:8080/posts/posts
The router
const router = new Router({
mode: 'history',
base: '',
routes: [
{ path: '/', name: 'home', component: HomePage },
{ path: '/posts', name: 'posts', component: PostsPage },
{ path: '/posts/:id', name: 'post', component: SinglePost },
{ path: '/projects', name: 'projects', component: ProjectsPage },
{ path: '/projects/:id', name: 'project', component: ProjectPage },
{ path: '/:page', name: 'page', component: SinglePage },
{ path: "*", redirect: '/' },
],
// etc..
});
I guess I am making a common mistake, but I can´t find a solution. Any help appreciated.
You can use absolute paths. Instead of
<router-link
tag="h2"
class="link"
:to="{ name: 'post', params: { id: post.id }}">
{{ post.title.rendered }}
</router-link>
use
<router-link
tag="h2"
class="link"
:to="{ name: '/post', params: { id: post.id }}">
{{ post.title.rendered }}
</router-link>
The change is /post vs post in router-link's :to attribute.
You could and probably should use nested routes and components for posts posts/:id, but this a little more work and you my not need it at the moment. More on nested routes here.
i'm trying to make my content component dynamic.(using vue-router)
this is my code:
<template>
<div class="row mb-3" id="customer-panel">
<Breadcrumb></Breadcrumb>
<CustomerSidebar></CustomerSidebar>
<div class="col-lg-9">
<PersonalInfo></PersonalInfo>
</div>
</div>
</template>
any thing is fixed in all pages except PersonalInfo component.
and this is my route:
{
path: '/customer',
component: Profile,
redirect: '/customer/profile',
children: [
{
path: 'profile',
name: 'profile',
component: Profile
},
{
path: 'order',
name: 'order',
component: Order
},
]
}
what should i do?
i don't want to repeat my code and copy & past in another component.
i just want when i go to order route, Order component loaded instead of PersonalInfo.
what is the best way?
https://router.vuejs.org/guide/essentials/nested-routes.html
You can acheive your desired result with <router-view></router-view>
Any nested routes / children of your parent route will be rendered here, on route change.
Component:
<template>
<div class="row mb-3" id="customer-panel">
<Breadcrumb></Breadcrumb>
<CustomerSidebar></CustomerSidebar>
<div class="col-lg-9">
<router-view></router-view>
</div>
</div>
</template>
Routes:
{
path: '/customer',
component: Customer,
children: [
{
path: 'profile',
name: 'profile',
component: Profile
},
{
path: 'order',
name: 'order',
component: Order
},
]
}
If I understand correctly, you could try using dynamic component selection using the is attribute:
<template>
<div class="row mb-3" id="customer-panel">
<Breadcrumb></Breadcrumb>
<CustomerSidebar></CustomerSidebar>
<div class="col-lg-9">
<component is="currentComponent"></component>
</div>
</div>
</template>
And associate currentComponent variable to the name of the component you want to use in the current route.
{
path: '/customer',
component: Profile,
redirect: '/customer/profile',
children: [
{
path: 'profile',
name: 'profile',
components: { default: Profile, currentComponent: MyComponent1 }
},
{
path: 'order',
name: 'order',
component: {default: Order, currentComponent: MyComponent2 }
},
]
}
See:
https://v2.vuejs.org/v2/guide/components.html#Dynamic-Components
https://router.vuejs.org/guide/essentials/passing-props.html
I have a simple routing:
export default new Router({
routes: [
{
path: '/',
name: 'Start',
component: Start
},
{
path: '/plan',
name: 'Plan',
component: Plan
},
{
path: '/cel',
name: 'Cel',
component: Cel
}
]
})
And I have also a simple menu:
<ul class="nav nav--top">
<li><router-link to="/">Start</router-link></li>
<li><router-link to="/plan">Plan</router-link></li>
<li><router-link to="/cel">Cel</router-link></li>
</ul>
It works fine, but I have a problem with active link class. A start url '/' has always class 'router-link-active' even I have active other url.
<ul class="nav nav--top">
<li>Start</li>
<li>Plan</li>
<li>Cel</li>
</ul>
How to fix it?