I'm trying to pass data from one route component - UserList.vue to another route component - CreateUser.vue in vue.js
but getting undefined when I try to access passed data inside destination component.
routes :
{
path: '/',
name: 'main',
component: InitialView,
children: [{
path: '/',
alias: '/login',
name: 'login',
component: () => import('../components/LogIn.vue')
}]
},
{
path: '/u',
name: 'u',
component: () => import('../views/MainView.vue'),
children: [{
path: 'users',
alias: 'users',
name: 'users',
component: () => import('../views/UsersView.vue'),
children: [{
path: 'create-user',
name: 'create_user',
component: () => import('../components/CreateUser.vue')
}, {
path: 'list',
alias: '',
name: 'users_list',
component: () => import('../components/UserList.vue')
}, {
path: 'edit',
name: 'edit_user',
component: () => import('../components/CreateUser.vue'),
props: true,
}]
},
UserList.vue :
<router-link :to="{
name: 'edit_user',
params: {
'userId': 'some',
'data' : "newUser"
}
}">
CreateUser.vue :
props: ['userId', 'data'],
I'm trying to access userId and data in CreateUser.vue as this.userId and this.data
I have already referred many similar questions but nothing seems to work
Related
I need to load a route outside the app.vue, I have a dashboard that works fine then I decided to implement a login which implied changing the app.vue, so after changing it I have the problem that my dashboard loads inside app.vue thus taking the styles of app.vue and completely deforming, so what now I need is to load outside of app.vue so it can work properly like it did before.
These are my routes:
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
mode: 'history', // to disappear the # in URL's
base: process.env.BASE_URL,
routes: [
//HOME
{
name: 'Home',
path: '/',
component: () => import('#/components/Home.vue'),
},
//LOGIN
{
name: 'Login',
path: '/login',
//component: () => import('#/views/login/Login'),
component: () => import('#/components/Login.vue'),
},
//REGISTER
{
name: 'Register',
path: '/register',
component: () => import('#/components/Register.vue'),
},
//DASHBOARD
{
//name: 'Dashboard',
path: '/dash',
name: 'dashboardd',
component: () => import('#/views/dashboard/Index'),
children: [
//CLIENTS
{
name: 'Clients',
path: '/Clients',
component:()=> import('#/views/clientss/Clientss')
},
//SALES
{
name: 'Sales',
path: '/sales',
component:()=> import('#/views/sales/Sales')
},
//NUEVA VENTA
{
name: 'Sales',
path: '/new-sale',
component:()=> import('#/views/sales/NewSale')
},
//productos
{
name: 'Productos',
path: '/products',
component:()=> import('#/views/articulos/Products')
},
//listar articulos
{
name: 'ListarArticulos',
path: '/articulos',
component:()=> import('#/views/articulos/ListarArticulos')
},
//crear articulo
{
name: 'CrearArticulo',
path: '/articulos/crear',
component:()=> import('#/views/articulos/CrearArticulo')
},
//editar articulo
{
name: 'EditarArticulo',
path: '/articulos/editar/:id',
component:()=> import('#/views/articulos/EditarArticulo')
},
// Dashboard
{
name: 'Dashboard',
path: '/dash',
component: () => import('#/views/dashboard/Dashboard'),
},
{
name: 'PROVEEDORES',
path: '/providers',
component: () => import('#/views/providers/Provider'),
},
{
name: 'USUARIOS',
path: '/users',
component: () => import('#/views/users/User'),
},
{
name: 'REPORTES',
path: '/reports',
component: () => import('#/views/reports/Report'),
},
// Pages
{
name: 'User Profile',
path: 'pages/user',
component: () => import('#/views/dashboard/pages/UserProfile'),
},
{
name: 'Notifications',
path: 'components/notifications',
component: () => import('#/views/dashboard/component/Notifications'),
},
{
name: 'Icons',
path: 'components/icons',
component: () => import('#/views/dashboard/component/Icons'),
},
// Maps
{
name: 'Google Maps',
path: 'maps/google-maps',
component: () => import('#/views/dashboard/maps/GoogleMaps'),
},
],
},
],
})
And I need to load the route named 'Dashboard' outside the App.vue. Because of my dashboard has his own styles and work properly when it is the only app running :
You can simply access the router from all components that are part of your Vue by using this.$router.
In Vue 2, you would need to call this.$router.push({name:'Dashboard'}) to instantly navigate to the route named 'Dashboard'.
I try to use to generate a dynamic nav list from my routes in my routes.js:
const routes = [
{
path: '/',
component: () => import('layouts/MainLayout.vue'),
children: [
{ path: '', name: 'home', component: () => import('pages/Index.vue') },
{ path: '/users', name: 'users', component: () => import('pages/Users.vue') },
{ path: '/news', name: 'news', component: () => import('pages/News.vue') },
],
},
// Always leave this as last one,
// but you can also remove it
{
path: '*',
component: () => import('pages/Error404.vue'),
},
];
export default routes;
that's the part of my MainLayout for the navigation list:
<ul>
<li v-for="item in routes" :key="item">
<router-link :to="item.path">{{item.name}}</router-link>
</li>
</ul>
But I can't get a list and I'm getting no error, did I maybe use the global MainLayout.vue wrong here which contains my header and footer and other global stuff or how can I get all the paths from just one children?
I think you are looking for this:
computed: {
routeList() {
return this.$router.options.routes
}
}
Got it, I added all Layout Stuff into my App.vue and uses the routes like normal, why so complicated :)
const routes = [
{ path: '/', name: 'home', component: () => import('pages/Index.vue') },
{ path: '/users', name: 'users', component: () => import('pages/Users.vue') },
{ path: '/news', name: 'news', component: () => import('pages/News.vue') },
{ path: '*', component: () => import('pages/Error404.vue') },
];
export default routes;
and as nav links:
<router-link
v-for="route in $router.options.routes"
:key="route.path"
:to="route.path"
>{{ route.name }}</router-link
>
works as aspected.
I know we can go to a route by its name using $router.push({ name: 'route-name' }).
What I want to know is how to do that with a child route name.
This is my route structure:
export default [
{
path: '/',
name: 'home',
component: () => import('#/views/Home.vue'),
childs: [
{
name: 'home.about',
path: '/about',
component: import('#/views/Home/About.vue')
}
]
}
]
But my console says [vue-router] Route with name 'home.about' does not exist for $router.push({ name: 'home.about' }).
What I'm missing?
Obs: The idea is to not route to the child using a hard route path.
const router = new VueRouter({
routes: [{
path: '/foo',
name: 'foo',
component: Foo,
children: [
{
path: 'fooChild1',
name: 'fooChild1',
component: FooChildComponent
},
{
path: 'fooChild2',
name: 'fooChild2',
component: FooChildComponent
}
]
}, {
path: '/bar',
component: Bar
}]
})
Now if you wish to navigate to fooChild1 then use $router.push({ name: 'fooChild1' }) or if you wish to navigate to fooChild2 then use $router.push({ name: 'fooChild2' })
You have a typo.
It should be children and not childs.
export default [
{
path: '/',
name: 'home',
component: () => import('#/views/Home.vue'),
children: [
{
name: 'home.about',
path: '/about',
component: import('#/views/Home/About.vue')
}
]
}
]
How can I navigate to a child state using $router.push?
My routes:
const routes = [
{
path: "/customers", name: 'Customers',
components: {content: CustomersMain},
props: {header: true, content: false},
children: [
{
path: '',
component: CustomerDetailsEmpty
},
{
path: ':id',
name: 'CustomerDetails',
component: CustomerDetails
}
]
}
];
How can I navigate to CustomerDetails with an id param set using
$router.push?
This did the trick:
this.$router.push({ name: `CustomerDetails`, params: {id} });
I have an issue.
I have a router like this with child.
{
component: () => import('#/components/roles/Index'),
path: '/roles',
name: 'roles.index',
meta: {
auth: true,
roles: ['admin']
},
children: [{
component: () => import('#/components/roles/Show'),
path: ':id',
name: 'roles.show',
meta: {
auth: true,
roles: ['admin']
}
}]}
When i click on button the url is changing but component is not loading.
<v-btn icon class="mx-0" :to="{ name: 'roles.show', params: { id: props.item.id }}">
<v-icon color="blue">info</v-icon>
</v-btn>
But when i do this like that everything work right
{
component: () => import('#/components/roles/Index'),
path: '/roles',
name: 'roles.index',
meta: {
auth: true,
roles: ['admin']
}
},
{
component: () => import('#/components/roles/Show'),
path: '/roles/:id',
name: 'roles.show',
meta: {
auth: true,
roles: ['admin']
}
}
Logically a path cannot contain param only. path: ':id' will match everything, which is problematic.