I am currently struggeling with adding multiple Child routes to my tab in an App using Ionic with Vue.js
This works totally fine:
{
path: 'tab3',
component: () => import('#/views/Tab3.vue')
},
{
path: 'tab3/tab_new_sl',
name: 'tab_new_sl',
component: () => import('#/views/Tab_new_SL.vue')
},
But as soon as I add another child route, the app crashes:
{
path: 'tab3',
component: () => import('#/views/Tab3.vue')
},
{
path: 'tab3/tab_new_sl',
name: 'tab_new_sl',
component: () => import('#/views/Tab_new_SL.vue')
},
{
path: 'tab3/tab_show_list',
name: 'tab_show_list',
component: () => import('#/views/Tab_Show_list.vue')
}
Error:
TypeError: undefined is not an object (evaluating 'modules[moduleId].call')
undefined
promiseReactionJob
27
Maybe one of you can tell me how I define multiple child routes
i think the other paths should be children
https://github.com/aaronksaunders/ionic-vue3-sample-2/blob/master/src/router/index.ts
{
path: 'tab3',
component: () => import('#/views/Tab3.vue')
children : [
{
path: 'tab3/tab_new_sl',
name: 'tab_new_sl',
component: () => import('#/views/Tab_new_SL.vue')
},
{
path: 'tab3/tab_show_list',
name: 'tab_show_list',
component: () => import('#/views/Tab_Show_list.vue')
}
]
}
Related
Vuejs stopped rendering components after I added a transition in the children route of my dashboard layout when I checked the error there was no error and no warnings but whenever I am reloading the page the components render, and the same functionality works in the same application in my login layouts children route when I am going in the network I am getting 304 HTTP error
this is my index router
import { createRouter, createWebHistory } from "vue-router";
// importing Dashboard routes
import DashboardRoutes from "./Dashboard/index.js";
import store from "#/store/store.js";
const router = createRouter({
history: createWebHistory(),
routes: [
{
path: "/",
// redirecting the root to the login welcome page
redirect: { name: "login" },
},
{
// creating a group path for all the login pages
path: "/login",
name: "login",
redirect: { name: "welcome" },
component: () => import("../components/Pages/Login/LoginMain.vue"),
//checking the condition if user is logged in or not and redirecting
beforeEnter: (_, _2, next) => {
if (store.state.login.isLoggedIn) {
next("/dashboard");
} else {
next();
}
},
children: [
{
path: "/welcome",
name: "welcome",
component: () =>
import("../components/Pages/Login/Childrens/WelCome.vue"),
},
{
path: "/austria-login",
name: "austria-login",
component: () =>
import("../components/Pages/Login/Childrens/AustriaLogin.vue"),
},
{
path: "/sms-login",
name: "sms-login",
component: () =>
import("../components/Pages/Login/Childrens/SmsLogin.vue"),
},
{
path: "/enter-tpn",
name: "enter-tpn",
component: () =>
import("../components/Pages/Login/Childrens/EnterTpn.vue"),
//chcking the condition of phone and social security token is entered
beforeEnter: (_, _2, next) => {
if (!store.state.login.phoneVerified) {
next("/sms-login");
} else {
next();
}
},
},
],
},
// using Dashboard Routes
...DashboardRoutes,
],
scrollBehavior(_, _2, savedPosition) {
if (savedPosition) {
window.scrollTo(savedPosition);
} else {
window.scrollTo(0, 0);
}
},
});
export default router;
this is my dashboard children routes
import AppointmentRoutes from "./Appointment"; // importing appointment children routes
import SettingRoutes from "./Setting";
import store from "#/store/store";
const DashboardRoutes = [
{
// router group for all the dashboard views
path: "/dashboardMain",
name: "dashboardMain",
component: () => import("../../components/Pages/DashBoard/IndexMain.vue"),
beforeEnter: (_, _2, next) => {
if (store.state.login.isLoggedIn) {
next();
} else {
next('/login');
}
},
children: [
{
path: "/dashboard",
name: "dashboard",
component: () =>
import("../../components/Pages/DashBoard/Home/DashBoard.vue"),
props: { sidebar: true },
},
// router for appointments
{
path: "/appointments",
name: "PatientAppoinetments",
redirect: { name: "PatientAppointmentsData" },
component: () =>
import(
"../../components/Pages/DashBoard/PatientAppointment/PatientAppointment.vue"
),
props: { sidebar: true },
// children group for appointments components
children: [...AppointmentRoutes],
},
{
path: "/requests",
name: "Requests",
component: () =>
import(
"../../components/Pages/DashBoard/PatientRequests/PatientRequest.vue"
),
},
{
path: "/medications",
name: "Medications",
component: () =>
import(
"../../components/Pages/DashBoard/PatientMedication/PatientMedication.vue"
),
},
{
path: "/questions",
name: "Questions",
component: () =>
import(
"../../components/Pages/DashBoard/PatientQuestionaries/PatientQuestionaries.vue"
),
},
{
path: "/health-status",
name: "HealthStatus",
component: () =>
import(
"../../components/Pages/DashBoard/PatientHealth/PatientHealth.vue"
),
},
{
path: "/diagnostic-center",
name: "PatientDiagnosticCenter",
component: () =>
import(
"../../components/Pages/DashBoard/PatientDiagnostic/PatientDiagnosticCenter.vue"
),
},
{
path: "/vaccination",
name: "PatientVaccination",
component: () =>
import(
"../../components/Pages/DashBoard/PatientVaccination/PatientVaccination.vue"
),
},
{
path: "/setting",
name: "Setting",
redirect: { name: "AccountSetting" },
component: () =>
import("#/components/Pages/DashBoard/Setting/SettingIndex.vue"),
children: [...SettingRoutes],
},
{
path: "/chat",
name: "PatientChat",
redirect: { path: "/chat/gautam" },
component: () =>
import(
"../../components/Pages/DashBoard/PatientChat/PatientChat.vue"
),
// children group for chat page
children: [
{
path: "/chat/:name",
name: "chatMessages",
component: () =>
import(
"../../components/Pages/DashBoard/PatientChat/Children/PatientChatmessages.vue"
),
},
],
},
{
path: "/access-log",
name: "AccessLog",
component: () =>
import("#/components/Pages/DashBoard/AccessLog/AccessLog.vue"),
},
{
path: "/my-profile",
name: "MyProfile",
component: () =>
import("#/components/Pages/DashBoard/MyProfile/MyProfile.vue"),
props: { sidebar: true },
},
],
},
];
export default DashboardRoutes;
and this is DahboardMain where i want to renders my dashboard children pages
but i am getting the blank the black screen children area whenere i am going to any route except page reload
I tried to remove beforeEnter guard from the routes and I also removed all the code from the dashboard layout except router-view but still getting the black screen
enter image description here this is the image of the blank screen
enter image description here this is showing in the network
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 am trying something like this
{
path: "/portfolio",
component: () =>
import("../common/components/Layout/Layout/Profile/ProfileLayout"),
meta: { requiresAuth: false },
children: [
{
path: "/:username",
component: () =>
import(/*webpackChunkName: "profile"*/ "../modules/Profile/Profile"),
},
],
},
But the piece of code is not working while routes without child routes working perfectly
{
path: "/profile/:userName",
component: () => import("../modules/profile/UserProfile"),
}
how can i solve the first piece of code ?
You should remove the prepended slash from the child route path :
path: ":username",
or try out :
path: "user/:username",
then you could visit the url like /portfolio/user/john
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.
My routing for my site works fine but the problem arises when I hit the refresh button.
On a base route for example http://localhost:8080/employers the page or component style remains the same but when I refresh a child route for example http://localhost:8080/employers/google all the style for this component will be lost.
Any help on how to resolve this problem will be appreciated
import Vue from 'vue'
import Router from 'vue-router'
// import store from './store.js'
Vue.use(Router)
const router = new Router({
mode: 'history',
base: process.env.BASE_URL,
routes: [
{
path: '/',
component: () => import('./views/Home.vue'),
children: [
{
path: "",
component: () => import("./views/HomePage.vue"),
},
{
path: '/jobs',
name: 'jobs',
component: () => import('./views/JobListings.vue')
},
{
path: '/job/:id',
name: 'job',
component: () => import('./views/JobDetails.vue')
},
{
path: '/login',
name: 'login',
component: () => import('./views/Login.vue')
},
{
path: '/register',
name: 'register',
component: () => import('./views/Register.vue')
},
{
path: '/forgotpassword',
name: 'forgotpassword',
component: () => import('./views/ForgotPassword.vue')
},
{
path: '/verify',
name: 'verify',
component: () => import('./views/Verify.vue')
},
],
},
{
path: '/employer',
component: () => import('#/views/Employers.vue'),
children: [
{
path: '',
component: () => import('./views/Employers/Profile.vue')
},
{
path: 'profile',
component: () => import('./views/Employers/Profile.vue')
},
{
path: 'post',
component: () => import('./views/Employers/PostJob.vue')
},
{
path: 'listings',
component: () => import('./views/Employers/Listings.vue')
},
{
path: 'settings',
component: () => import('./views/Employers/Listings.vue')
},
{
path: 'editresume',
component: () => import('./views/Employers/Listings.vue')
},
{
path: 'closeaccount',
component: () => import('./views/Employers/Listings.vue')
},
]
},
// jobseekers route
{
path: '/jobseeker',
component: () => import('#/views/Jobseekers/Home.vue'),
children: [
{
path: '',
component: () => import('#/views/Jobseekers/Profile.vue')
},
{
path: 'resume',
component: () => import('#/views/Jobseekers/Resume.vue')
},
{
path: 'profile',
component: () => import('#/views/Jobseekers/Profile.vue')
},
{
path: 'settings',
component: () => import('#/views/Jobseekers/Settings.vue')
},
{
path: 'applications',
component: () => import('#/views/Jobseekers/Applications.vue')
},
{
path: 'close',
component: () => import('#/views/Jobseekers/Close.vue')
},
]
},
{
path: '/jobseeker/:page',
component: () => import('#/views/Jobseekers/Profile.vue'),
},
{
path: '/search/:region/:keyword',
component: () => import('./views/JobListings.vue')
},
// not found route
{
path: '*',
name: '404',
component: () => import('./views/404.vue')
}
]
})
export default router
The problem is not with your routes, but how you write your css.
I recommend using a scoped style for in component styling (only this component will use the styles).
if more than one components are going to share styling, you can use css files separately.
I noticed that you are loading the components on-demand.
When you navigate from /employers to /employers/google route, there are some CSS styles from /employers route that are being reused in your /employers/google route.
So when you reload http://localhost:8080/employers/google route, you are unable to obtain the styles from /employers which causes your CSS to break.
My suggestion is to move common styles into one particular file and import it into the main file like App.vue so that they are loaded no matter which component is reloaded.
I'm also the same issue but I already include the CSS globally but it doesn't work,
finally, I try to change the router mode from history to hash it work.
Try in my case it works fine.
const router = new Router({
mode: "hash",
base: process.env.BASE_URL,
routes: []
})
Just add mode:"hash" after carrying out mode:"history", has shown below, and you are good to go
const router = new Router({
mode: "history",
mode: "hash",
routes: []
})