Currently I have my router set up to link to page components. Each of these page components have sub components so for example.
Home
<slider></slider>
<section></section>
<section></section>
<section></section>
<panel></panel>
Say I wanted to link to the Home page components component is this possible.
So the route would be http://example.com/home/panel
The above is just an example but is ideally what I am looking for. Any help would be awesome.
You can use nested routes by defining the routes children:
const routes = [{
path: '/home',
component: Home,
children: [{
path: 'panel',
component: Panel
}]
}]
Then in your Home component you would place a router-view tag to serve up the component:
<router-view></router-view>
Here's the JSFiddle: https://jsfiddle.net/craig_h_411/srxafk39/
Related
TLDR: Pre-rendered views of child-routes are using the parent meta info, but I'd like them to use the meta info defined on the child-route component.
I've got a Nuxt/Vue site set up that has a landing page, /items/index.vue that provides a grid of items, and child-routes set up as children to that landing page in my router.js file. These child-routes are rendered as modals within the /items/index.vue via the nuxt-child or router-view components. The child-route calls a component called /components/ItemsModal.vue which sets the appropriate meta tags (title, og:data, ect)
When I enter the URL for a child route, the meta/head info updates as expected, after an initial flash of the parent /items/index.vue meta info. However, my SEO info is showing the parent meta/head info, and not the updated info that is defined by the child-route component. When I view-source, I see that the pre-rendered delivered page does indeed have the parent info, and not the child-route info, nor any of the content associated with the child-route component.
Anyone have any experience configuring child routes to pre-render with the head info defined in the child-route component? I would expect a child-route to render its associated component before calling it good on the pre-render.
Code below, truncated/modified for clarity.
router.js
{
path: '/items',
name: 'item-index',
component: ItemIndex,
children: [
{
path: ':slug',
component: ItemModal, // defined as a var earlier in file
name: 'item-modal'
}
],
alias: []
},
/item/index.js
<template lang='pug'>
ThePage
ItemGrid
nuxt-child
</template>
<script>
import ItemGrid from '~/components/ItemGrid'
export default {
components: {
ItemGrid
}
head() {
return {
title: 'Parent Title,
meta: [{
hid: 'description',
name: 'description',
content: 'Parent description'
}]
}
}
</script>
/item/index.js
<template lang='pug'>
ThePage
Item
</template>
<script>
import Item from '~/components/Item'
export default {
components: {
Item
}
head() {
return {
title: 'Child Title,
meta: [{
hid: 'description',
name: 'description',
content: 'Child description'
}]
}
}
</script>
I neglected to mention that I was using vue-portal to lift the modal up in the DOM, and discovered, by more fully reading the documentation. SSR and Vue-Portal aren't compatible.
What I ended up doing was bypassing the vue-portal on SSR, just using nuxt-child to load the modal, and then triggering the vue-portal implementation on mounted. The SSR meta contact is properly handled through nuxt-child, and the UX is proper on mounted on the client side.
I have an application with authentication system and a backend dashboard.
By default the route show the authentication component :
{
path: "/",
name: "Authentication",
component: Auth
},
The App.view contains the
Once logged in I'm redirected to another vue component "home" :
{
path: "/dashboard",
name: "home",
component: Home,
},
So far, so good. In this home component i have some HTML with menu and I want to to show component in the same page.
Here is a sample of html from the home template
<div>
<router-link :to="'/dashboard/user'">User</router-link>
<router-link :to="'/dashboard/stats'">Stats</router-link>
<app-user></app-user>
<app-stats></app-stats>
</div>
I also created the routes for those components in router but while clicking on the link it shows a white page. I just began vue.js and I'm sure it's an easy stuff to manage. My objective is to display the component according to the page which is displayed.
Update your routing file like below so parent module can load its children in their respective router outlet.
Place <router-view></router-view> in your dashboard component so it will load its children.
If you visit /dashboard/user then UserCompoent will get render in <router-view></router-view> of dashboard component.
{
path: "/dashboard",
name: "home",
component: Home,
children: [
{
path: 'user',
component: UserComponent,
},
{
path: 'state',
component: StateComponent,
}
],
},
I'm trying to get a child link from router to render so that the parent route stays active.
Here's my router:
{
path: '/portfolio',
name: 'portfolio',
component: () => import('./views/Portfolio.vue'),
children: [
{
name: 'portfolioitems',
path: '/portf/:id',
component: () => import('./views/portf.vue')
}
],
}
And my link on items to get page:
<router-link :to="`/portfolio/portf/${items.id}`"> item </router-link>
The url does go to /portfolio/portf/10 for example, but nothing renders on page.
Thanks for any help!
Replace path: '/portf/:id', with path: 'portf/:id', and let us know if it works. I faced the same issue before and the solution I am giving you worked for me. It might also work for you.
When learning the Vue Router on https://router.vuejs.org/, the section on nested routes shows how to declare children routes.
But the only way it shows it being possible is declaring all of them in the single Router file. So if i were to build a somewhat large app index consisting of several independent apps, and i wanted each of those apps to have routing and links pointing to whatever pages they use, then it would be inconsistent and hard to maintain if it were mandated that those routes were all to be declared in the main router config. I guess i'm looking for a more separation-of-concerns approach.
Let's say if one of my apps was a Todo App whose main component is defined in TodoApp.vue, the kind of thing i'm hoping for is that i could define all the routes for this Todo app in its .vue file, and then the main router config would import it, and treat those routes as children of the main /todo route, assuming that /todo is the path to the Todo App.
For example, let's say this is an excerpt of my Router definition, showing that Todo is one of my apps that has some subnavigation going on:
const router = new Router({
base: process.env.BASE_URL,
routes: [
{
path: '/todo',
name: 'TodoApp',
component: Todo
children: [{
path: 'create-task',
component: TodoCreateTask,
},{
path: 'edit-tasks',
component: TodoEditTask,
},{
path: 'create-task',
component: TodoCreateTask,
}]
]
});
I am wondering if it would be possible to remove the children part from this declaration, move it into the Todo component file, and then do some kind of an import here?
You can simply store children routes in a separate file as a regular array, for example:
subroutes.js
// import the components that are being referenced
export default [{
path: 'create-task',
component: TodoCreateTask,
},{
path: 'edit-tasks',
component: TodoEditTask,
},{
path: 'create-task',
component: TodoCreateTask,
}]
App.vue
import subroutes from './subroutes';
const router = new Router({
base: process.env.BASE_URL,
routes: [
{
path: '/todo',
name: 'TodoApp',
component: Todo,
children: subroutes,
}
]
});
I have component with paginator. In this component I have beforeRouteEnter and beforeRouteUpdate for fetching data.
I open in browser http://localhost:8080/#/pages/1 After this I click by links .../pages/2 .../pages/3 and beforeRouteUpdate fetching data and show that. When I click to link .../pages/1 (it first path, beforeRouteEnter worked with him) browser go to this link, but beforeRouteUpdate does not occur and I see data of old page
code of my router:
export default new Router({
mode: 'hash',
linkActiveClass: 'open active',
scrollBehavior: () => ({ y: 0 }),
routes: [{
path: '/',
redirect: '/pages/1',
name: 'Home',
component: Full,
children: [{
path: 'pages/:num?',
name: 'Pages',
component: Pages
}, {
path: 'pageForm/:id?',
name: 'PageForm',
component: PageForm
}, {
path: 'settings',
name: 'Settings',
component: Settings
}]
}]
})
How I can resolve this issue?
UPD:
in App.vue and Full.vue I replace
<router-view></router-view>
to
<transition>
<keep-alive>
<router-view></router-view>
</keep-alive>
</transition>
but it not worked for me
UPD2
I make in App.vue
<keep-alive include="full">
<router-view></router-view>
</keep-alive>
and in Full.vue
<keep-alive include="Pages">
<router-view></router-view>
</keep-alive>
but it not worked for me too
My error was in my code. I not call next() in beforeRouteUpdate.
Now all working good
Your components are cached by vue. So, you need to use keep-alive. This will keep your component fresh and it will not allow to render component from cache.
Note:
When a component is toggled inside , its activated and deactivated lifecycle hooks will be invoked accordingly.
<keep-alive> does not work with functional components because they do not have instances to be cached.