I've made a dashboard with vuejs.
My problem is that i want to go directly to a route "dashboard/my-profile".
This route is a children of another :
{
path: '/dashboard',
name: 'dashboard',
components: { default:Dashboard },
children: [
{
path: 'my-profile',
name: 'show_profile',
components: {
subview: Profile
}
}
]
}
When i try to directly go to 'dashboard/my-profile' it load good but immediately redirect to 'dashboard' his parent
Do you have any idea how can i do that ?
It seems you have not defined router-view for the Profile:
<router-view></router-view><!-- Default: Dashboard -->
<router-view name="subview"></router-view><!-- Profile -->
Related
I want to show child component in component with vue js, but I couldn't figure out how to do it. Could you help.
When I click profile from the menu, "http://localhost:3000/admin/profile" logs in. When I click on the sub menus in the "ProfileDashboard", I want the child component to open. I think like accordion style.
const routes = [
{
path: '/',
component: DashboardLayout,
redirect: '/admin/overview'
},
{
path: '/admin',
component: DashboardLayout,
redirect: '/admin/overview',
children: [
{
path: 'overview',
name: 'Overview',
component: Overview
},
{
path: 'profil',
name: 'Profil',
component: ProfilDashboard,
children: [
{
path: 'siparisgecmisi',
name: 'siparisgecmisi',
component: Gecmis
}
]
}
]
},
{path: '*', component: NotFound}
]
export default routes
ProfilDashboard.vue
<router-link to="/admin/profil/siparisgecmisi" tag="li" class="list-group-item"><a>My order history</a></router-link>
A 404 for is coming from your server, not from the Vue application. You need to setup your server to be able to interpret the JS routing without going to look for files in directories that do not exist.
On their docs, Vue Router have some example for the most common server configurations, take a look here.
In order to do like that, you should create particular js file like this:
const menuTree = [
{
name: "Main menu",
link: "/ ",
icon: "main_icon",
list: [
{
name: "Sub menu 1",
link: "/",
icon: "any_icon",
list: [
{
name: "sub sub menu 1",
link: "/any/route",
},
{
name: "sub sub menu 2",
link: "/any/route/1"
},
]
}
]
}
];
export default menuTree;
this is propably basic question to ask but i have a problem with router settings. I have managed to build a nice, clean Views inside CMS system i am working on and my router settings looks like
const routes = [{
path: "/cms/dashboard/",
redirect: "/cms/dashboard/summary/"
}, {
path: "/cms",
name: "CMS",
component: CMS,
children: [{
id: ":id",
path: ":viewSlug",
name: "cmsView",
props: true,
component: () => import( /*webpackChunkName: "dashboard" */ "../views/CMS/CmsView.vue"),
children: [{
id: ":id",
path: ":childSlug",
name: "nestedRoute",
props: true,
component: () => import( /*webpackChunkName: "dashboard" */ "../views/CMS/NestedView.vue"),
children: [{
id: ":id",
path: ":secondChildSlug",
name: "nestedSecond",
props: true,
component: () => import( /*webpackChunkName: "dashboard" */ "../views/CMS/SecondNestedView.vue"),
}]
}]
}],
}];
so as you can see i am basically using only named routes which is neat because i can design all the pages i want in CMS to be just .json files that are included in store. The problem is redirecting seems not to work properly. The code:
{
path: "/cms/dashboard/",
redirect: "/cms/dashboard/summary/"
}
Works only when i refresh the page - so when I refresh a page when i am under /cms/dashboard - redirect works just fine, but when i go to "/cms/dashboard" via navigation - nothing happens. That's a little bit frustrating because i just want to always show child component as well as main component in every view.
Given the following route:
{
path: '/detail/:someId',
component: SomeDetailComponent,
name: 'some-detail',
children: [
{
path: 'dashboard',
component: DashboardComponent,
name: 'dashboard'
},
{
path: '',
redirect: { name: 'dashboard' }
},
{
path: 'other',
component: OtherComponent,
name: 'other'
}
]
},
Why does this work (the dashboard component is visible):
this.$router.push(`/detail/123/`);
But this doesn't:
this.$router.push({name: 'some-detail', params: { someId: 123 }});
In one case, the URL gets a trailing slash while in the other it doesn't. I've read somewhere in the docs that this is a breaking change coming from Vue2. See:
named-children-routes-with-an-empty-path-no-longer-appends-a-slash
So the real question here could be: how can I still have my working child navigations (with redirection) while still being able to navigate using the route name, instead of the route url part.
Description:
I am building a electron based Vue.js app with a settings icon that is always visible. Once the user clicks this icon, a settings modal will pop-up. This popup contains its own navigation / router-links.
Question:
Is it possible to only navigate a specific named router-view without actually navigating the main router-view
E.g. in Angular this would be done using the outlet prop:
path: 'settings-general',
outlet: 'settingsOutlet',
component: SettingsGeneralComponent
But in Vue all I could find was something like the snippet below, which navigates the main router-view to nothing
path: '/settings-general',
name: 'settings-general',
components: {
// default: This should just keep the current loaded component
settingsOutlet: require('#/components/SettingsGeneral').default
}
Below is my current Router config:
export default new Router({
routes: [
{
path: '/',
name: 'login-page',
component: require('#/components/LoginPage').default
},
{
path: '/home',
name: 'home-page',
component: require('#/components/HomePage').default
},
{
path: '/settings',
name: 'settings-page',
components: {
settingsRouter: require('#/components/SettingsPage').default
}
},
{
path: '*',
redirect: '/'
}
]
})
I have an issue with a default children route in Vue.js 2.
When I visit localhost/listings initially, it correctly loads index.vue and map.vue as a child.
When I navigate using router-link to localhost/listings/1, and then using router-link back to localhost/listings, then it still loads the show.vue template. This shouldn't happen?
I have no navigation guards or anything that should interfere. Is there anyway to correct this?
My routes:
window.router = new VueRouter({
routes: [
...
{
path: '/listings',
name: 'listing.index',
component: require('./components/listing/index.vue'),
children: [
{
path: '',
component: require('./components/listing/map.vue')
},
{
path: ':id',
name: 'listing.show',
component: require('./components/listing/show.vue')
}
]
},
...
]
});
The "father" router should not be named if you want a default child route, so instead using :to="{name: 'listing.index'}", use the name of the default child route (e.g :to="{name: 'listing.map'}").
The code should look like this:
window.router = new VueRouter({
routes: [
...
{
path: '/listings',
component: require('./components/listing/index.vue'),
children: [
{
path: '',
name: 'listing.map'
component: require('./components/listing/map.vue')
},
{
path: ':id',
name: 'listing.show',
component: require('./components/listing/show.vue')
}
]
},
...
]
});
Maybe try re-arranging the children, routes are fired in the order they match from top-to-bottom, so this should hopefully fix it:
window.router = new VueRouter({
routes: [
...
{
path: '/listings',
name: 'listing.index',
component: require('./components/listing/index.vue'),
children: [
{
path: ':id',
name: 'listing.show',
component: require('./components/listing/show.vue')
}
{
path: '',
component: require('./components/listing/map.vue')
},
]
},
...
]
});
Just for a bit of clarification, your path: '' essentially serves as a "catch all", which is likely why when it's at the top it's being found immediately and so the router never propagates any further down to the :id route.
In Vue 2.6.11 you can automatically redirect to a child route if parent route is hit:
const routes = [
{
name: 'parent',
path: '/',
component: Parent,
children: [
{
name: 'parent.child',
path: 'child',
component: Child,
}
],
/**
* #type {{name: string} | string} Target component to redirect to
*/
redirect: {
name: 'parent.child'
}
}
];
When you are using named routes and you want to load the component with your child inside, you have to use the name route for the child.
In your Navigation menu links, if you use name route for the parent, the child will not load automatically, even if the child path is nothing.
Let's say for example we have a User route, and we want to show list of users inside the component by default so whenever we go to '/user' path we want to load a list of users as a child in there:
routes: [
{
path: '/user',
name: 'User',
component: User,
children: [
{path: '', name: 'UserList', component: UserList}, // <== child path is = '';
]
}
]
If you think about the code, you might assume if you go to route with name 'User' you might get UserList in there as well, because the path for parent and children both are same. but it's not and you have to choose 'UserList' for the name.
Why this is happening?
Because Vuejs loads the exact component you are referring to, not the url.
you can actually test this, instead of using named route in your links, you can just refer the url, this time vuejs will load the parent and child together with no problem, but when you use named route, it doesn't look at the url and loads the component you are referring to.