Here i can get id of company by #click event whenever i choose company, It's get id accord company.
And now i want my Sidebar(navbar) get id accord url corresponding whenever i #click option in sidebar(product,sale,...) it gonna be :"companies/48/products" for example
{
path: "",
name: "Company",
component: () =>
import ("../views/DashboardLayout.vue"),
meta: { requiresAuth: true },
props: true,
children: [{
path: "companies",
component: () =>
import ("../views/CompaniesLayout.vue"),
children: [{
path: "",
component: () =>
import ("../companies/views/CompaniesDashboard.vue"),
},
{
path: ":companyId/contacts",
component: () =>
import ("../views/Contacts.vue"),
},
{
path: ":companyId/products",
component: () =>
import ("../views/Products.vue"),
},
{
path: ":companyId/sales",
component: () =>
import ("../views/Sales.vue"),
},
{
path: ":companyId/fees",
component: () =>
import ("../views/Fees.vue"),
},
{
path: ":companyId/employees",
component: () =>
import ("../views/Employees.vue"),
},
{
path: ":companyId/setting",
component: () =>
import ("../views/Setting.vue"),
},
{
path: "create",
component: () =>
import ("../companies/views/RegisterCompany.vue"),
},
],
},
{
path: "/dashboard",
component: () =>
import ("../views/WelcomeDashboard.vue"),
},
{
path: "/profile",
component: () =>
import ("../profile/views/Profile.vue"),
},
{
path: "products",
component: () =>
import ("../views/Products.vue"),
},
{
path: "sales",
component: () =>
import ("../views/Sales.vue"),
},
{
path: "fees",
component: () =>
import ("../views/Fees.vue"),
},
{
path: "employees",
component: () =>
import ("../views/Employees.vue"),
},
{
path: "setting",
component: () =>
` import ("../views/Setting.vue"),`
},
],
},
];
Here my route
links: [
{
to: "/dashboard",
icon: "mdi-view-dashboard",
text: "Dashboard",
},
{
to: `/companies/1/sales`,
icon: "mdi-currency-usd",
text: "Sales",
},
{
to: `/companies/1/contacts`,
icon: "mdi-domain",
text: "Contacts",
},
{
to: `/companies/1/products`,
icon: "mdi-cube-outline",
text: "Products",
},
{
to: `/companies/1/fees`,
icon: "mdi-calculator-variant-outline",
text: "Fees",
},
{
to: `/companies/1/employees`,
icon: "mdi-account-supervisor",
text: "Employees",
},
{
to: `/companies/1/setting`,
icon: "mdi-cog",
text: "Company setting",
},
],
Here my data link. I set hard id = 1 to sure it right. it's supposed to companies/${companyId}/setting for example. If you want any code to compare, tell me.
Tks everyone so much..
Bonus loom for everyone know my issue
https://www.loom.com/share/32228acb3d6e4e77b496f9791d730879
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 am using vue3 and vue-router.
routes
import { createRouter, createWebHashHistory } from 'vue-router'
import InitialView from '../views/InitialView.vue'
import store from '#/store/index.js'
import { defineAsyncComponent } from 'vue'
import SkeletonCard from '../skeletons/SkeletonCard.vue'
import NotFound from '#/components/NotFound.vue'
// const UsersList = defineAsyncComponent({
// loader: () => import("#/components/UserList.vue"),
// loadingComponent: SkeletonCard,
// delay: 0
// })
const RolesList = defineAsyncComponent({
loader: () => import('../components/RoleList.vue'),
loadingComponent: SkeletonCard,
delay: 0
})
const ClientsList = defineAsyncComponent({
loader: () => import('../components/ClientsList.vue'),
loadingComponent: SkeletonCard,
delay: 0
})
const TasksList = defineAsyncComponent({
loader: () => import('../components/TasksList.vue'),
loadingComponent: SkeletonCard,
delay: 0
})
// const MyTasksList = defineAsyncComponent({
// loader: () =>
// loadingComponent: SkeletonCard,
// delay: 0
// })
const ActivityList = defineAsyncComponent({
loader: () => import('../components/UserActivity.vue'),
loadingComponent: SkeletonCard,
delay: 0
})
const routes = [
{
path: '/',
alias: '/#',
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: '/no-access',
name: 'no_access',
component: () => import('../components/NoAccess.vue')
},{
path: '/users',
alias: 'users',
name: 'users',
component: () => import('../views/UsersView.vue'),
children: [{
path: 'create-user',
name: 'create_user',
component: () => import('../components/UserCreate.vue'),
meta: {
protected: true,
breadcrumb: {
title: 'create user',
path: [{
text: 'list',
route: '/u/users/list'
}, {
text: 'create',
route: '/u/users/create-user'
}]
}
},
}, {
path: '',
alias: 'list',
name: 'users_list',
component: () => import("#/components/UserList.vue"),
meta: {
breadcrumb: {
title: 'users',
action: true,
actionUrl: '/u/users/create-user',
path: [{
text: 'list',
route: '/u/users/list'
}]
}
}
},
{
path: 'edit/:editUserId',
name: 'edit_user',
meta: {protected: true},
component: () => import('../components/UserCreate.vue'),
props: true,
}
]
}, {
path: 'roles',
name: 'roles',
component: () => import('../views/RoleView.vue'),
children: [{
path: 'create-role',
name: 'create_role',
component: () => import('../components/RoleCreate.vue'),
meta: {
breadcrumb: {
title: 'roles',
path: [{
text: 'list',
route: '/u/roles/list'
}, {
text: 'create',
route: '/u/roles/create-role'
}]
},
protected: true
},
}, {
path: 'list',
alias: '',
name: 'roles_list',
component: RolesList,
meta: {
breadcrumb: {
title: 'roles',
action: true,
actionUrl: '/u/roles/create-role',
path: [{
text: 'list',
route: '/u/roles/list'
}]
}
}
}, {
path: 'edit/:editRoleId',
name: 'edit_role',
meta: {
breadcrumb: [{
title: 'edit role',
path: [{
text: 'list',
route: '/u/roles/list'
}, {
text: 'edit',
route: '/u/roles/edit/:editRoleId',
}]
}],
protected: true
},
component: () => import('../components/RoleCreate.vue'),
props: true
}]
},{
path: 'clients',
name: 'clients_list',
component: () => import('../views/ClientView.vue'),
children: [{
path: 'list',
alias: '',
name: 'clients_list',
component: ClientsList,
meta: {
breadcrumb: {
title: 'clients',
action: true,
actionUrl: '/u/clients/create-client',
path: [{
text: 'list',
route: '/u/clients/list'
}]
}
}
}, {
path: 'create-client',
name: 'create_client',
component: () => import('../components/ClientCreate.vue'),
meta: {
breadcrumb: {
title: 'create client',
path: [{
text: 'list',
route: '/u/clients/list'
}, {
text: 'create',
route: '/u/clients/create-client'
}]
},
protected: true,
}}
]}, {
path: '/tasks',
name: 'tasks',
component: () => import('../views/TasksView.vue'),
children: [{
path: '',
alias: 'list',
name: 'tasks_list',
component: TasksList,
meta: {
breadcrumb: {
title: 'tasks',
action: true,
actionUrl: '/u/tasks/create-task',
path: [{
text: 'list',
route: '/u/tasks/list'
}]
}
}
}, {
path: 'create-task',
name: 'create_task',
component: () => import('../components/TasksCreate.vue'),
meta: {
breadcrumb: {
title: 'create task',
path: [{
text: 'list',
route: '/u/tasks/list'
}, {
text: 'create',
route: '/u/tasks/create-task'
}]
},
protected: true
}
}]
}, {
path: '/my-tasks',
name: 'my_tasks',
component: () => import('../views/MyTasksView.vue'),
children: [{
path: '',
name: 'my_tasks_list',
component: () => import('../components/MyTasksList.vue'),
meta: {
breadcrumb: {
title: 'my tasks',
path: [{
text: 'list',
route: '/u/my-tasks/list'
}]
}
}
}]
}, {
path: 'activity',
name: 'activity',
component: ActivityList,
meta: {
breadcrumb: {
title: 'activity',
path: [{
text: 'list',
route: '/u/activity/'
}]
},
protected: true
},
}]
},
{
path: '/:pathMatch(.*)',
name: 'not-found',
component: NotFound
}
]
const router = createRouter({
history: createWebHashHistory(process.env.BASE_URL),
routes
})
router.beforeEach((to, from)=>{
if (to?.meta?.protected) {
console.log(to, from)
const userRights = store.getters['rights/getUserRights']
const allow = userRights?.some((right) => right?.code_name == to?.name)
if (!allow) return { name: 'no_access'}
}
})
export default router
http://localhost:8080/#/ is login page if valid login in performed user gets redirected to my_tasks_list route
In login page
axios.post('api/login', {
email: this.email,
password: this.pwd
}, {
withCredentials: true,
})
.then((results) => {
if (results?.data?.login == 1) {
this.$router.push({name: 'my_tasks_list'})
}
else {
this.$router.push({name: 'login'})
}
})
.catch(err =>
swal({
text: `Ooops ${err}`
})
)
Everything works fine If I access http://localhost:8080 it immediately redirect me to http://localhost:8080/#/ and if I pass valid login credentials then to my_tasks_list component
if I try to access http://localhost:8080/#/ then I get redirected to login page and if I pass valid login credentials then to my_tasks_list everything seems to work but my_tasks_list isn't rendering actual component.
any help is appreciated
I am trying to create my routes, but I want them to all use the default router-view in my app.
Looking at the documentation:
https://router.vuejs.org/guide/essentials/named-views.html
I should be able to target views by doing something like this:
const routes = [
{
path: "/",
name: "home",
component: {
default: Home
},
},
]
I want to do this with a child, so I did this:
{
path: "/categories",
name: "categories",
meta: {
title: "Categories",
},
component: Categories,
children: [
{
path: ":slug",
name: "product-list",
meta: {
title: "Categories",
},
component: { default: ProductList },
],
},
],
},
I get no compile errors, but when navigating to /categories/televisions it only shows the Categories component, not the ProductList.
So my first question is, can children target app level router-view?
I also tried to add a new router-view like this:
<router-view />
<router-view name="root" />
and then updated my routes to this:
{
path: "/categories",
name: "categories",
meta: {
title: "Categories",
},
component: Categories,
children: [
{
path: ":slug",
name: "product-list",
meta: {
title: "Categories",
},
component: { root: ProductList },
},
],
},
But this didn't work either.
If it is possible to do this, then my next question, which is where I am heading.
Can I use lazy loaded components and target named/default router-views?
For example, I have this function:
const lazyLoad = (name) => {
return () => import(`../views/${name}/${name}.component.vue`);
};
Which I call from my routes like this:
{
path: "/categories",
name: "categories",
meta: {
title: "Categories",
},
component: lazyLoad("categories"),
children: [
{
path: ":slug",
name: "product-list",
meta: {
title: "Categories",
},
component: lazyLoad("product-list"),
},
],
},
Can I do it like this?
{
path: "/categories",
name: "categories",
meta: {
title: "Categories",
},
component: lazyLoad("categories"),
children: [
{
path: ":slug",
name: "product-list",
meta: {
title: "Categories",
},
component: { default: lazyLoad("product-list") },
},
],
},
and target the root router-view?
When the application starts, I am setting the default path to users, if authentication fails, then it will navigate to sign in. But it redirects to 404.
const routes = [
{
path: "/signin",
name: "signIn",
component: () => import("#/path"),
},
{
.........
},
{
.......
},
{
path: "/",
redirect: "/users",
component: adminLayout,
//needed for nav gaurd
//meta: { requiresAuth: true },
children: [
{
path: "dashboard",
name: "dashboard",
component: dashboard,
meta: {
title: 'Dashbaord'
}
},
{
path: "users",
component: () => import("path"),
meta: {
title: 'Users'
},
children: [
{
path: "",
component: () => import("path"),
meta: {
title: ''
}
},
{
path: ":id/profile",
component: () => import("path"),
meta: {
title: 'Profile'
}
},
]
},
],
},
{
path: "*",
redirect: "/404",
},
{
// the 404 route, when none of the above matches
path: "/404",
name: "404",
component: () => import("#path"),
},
];
If i set redirect: "/dashboard" or redirect: "/signin",, then it works fine.
Also if I navigate to the right path, like "http://localhost:8080/signin" it will work. But if I only type "http://localhost:8080" hit enter it will go to 404 page
Note : first my users component like this and its works fine
{
path: "users",
component: () => import("path"),
meta: {
title: 'Users'
},
},
{
path: ":id/profile",
component: () => import("path"),
meta: {
title: 'Profile'
},
},
Please help me to understand the issue.
Ive been struggling with a bug that occurs occasionally within my VueJs2 application.
After i login and im authenticated within my app and data is stored within Vuex then im unable to access an authenticated route when clicking on the link.
The problem is with the 'profile' route which is on my navbar when logged in. If i refresh the browser then it works and im able to click the link and view the component.
The problem is with the beforeEach and it failing to get the Vuex authenticated as true.
This is my current router setup.
import Vue from 'vue'
import VueRouter from 'vue-router'
import { store } from '../store/index'
import SiteIndex from '#/components/home/Index.vue'
import AuctionIndex from '#/components/auction/Index.vue'
import ViewVehicle from '#/components/vehicle/View.vue'
import Login from '#/components/authentication/Login.vue'
import Register from '#/components/registration/Register.vue'
import ForgotPassword from '#/components/authentication/Forgot.vue'
import Cart from '#/components/cart/Index.vue'
import UserProfile from '#/components/user/Profile.vue'
import AboutUs from '#/components/site/About.vue'
import Faq from '#/components/site/Faq.vue'
import HowItWorks from '#/components/site/HowItWorks.vue'
import ContactUs from '#/components/site/ContactUs.vue'
import Terms from '#/components/site/Terms.vue'
import Error404 from '#/components/site/Error404.vue'
Vue.use(VueRouter)
const router = new VueRouter({
routes: [
{ path: '/', redirect: '/index' },
{ path: '/logout', redirect: '/login' },
{
path: '/index',
name: 'home',
component: SiteIndex,
meta: {
breadcrumb: 'Home',
displayBreadCrumb:false
}
},
{
path: '/auction',
name: 'auction',
component: AuctionIndex,
meta: {
breadcrumb: {
label: 'Auction',
parent: 'home'
},
displayBreadCrumb:true
}
},
{
path: '/auction/:slug/:vehicle_id',
component: ViewVehicle,
meta: {
displayBreadCrumb:true
}
},
{
path: '/cart',
component: Cart,
meta: {
requiresAuth: true,
breadcrumb: {
label: 'Basket',
parent: 'home'
},
displayBreadCrumb:true
}
},
{
path: '/login',
component: Login,
meta: {
breadcrumb: {
label: 'Login',
parent: 'home'
},
displayBreadCrumb:true
}
},
{
path: '/register',
component: Register,
meta: {
breadcrumb: {
label: 'Register',
parent: 'home'
},
displayBreadCrumb:true
}
},
{
path: '/forgot',
component: ForgotPassword,
meta: {
breadcrumb: {
label: 'Forgot Password',
parent: 'home'
},
displayBreadCrumb:true
}
},
{
path: '/profile',
component: UserProfile,
meta: {
requiresAuth: true,
breadcrumb: {
label: 'My Profile',
parent: 'home'
},
displayBreadCrumb:true
}
},
{
path: '/terms',
component: Terms,
meta: {
breadcrumb: {
label: 'Terms and conditions',
parent: 'home'
},
displayBreadCrumb:true
}
},
{
path: '/howitworks',
component: HowItWorks,
meta: {
breadcrumb: {
label: 'How it works',
parent: 'home'
},
displayBreadCrumb:true
}
},
{
path: '/faq',
component: Faq,
meta: {
breadcrumb: {
label: 'Frequently asked questions',
parent: 'home'
},
displayBreadCrumb:true
}
},
{
path: '/about',
component: AboutUs,
meta: {
breadcrumb: {
label: 'About us',
parent: 'home'
},
displayBreadCrumb:true
}
},
{
path: '/contactus',
component: ContactUs,
meta: {
breadcrumb: {
label: 'Contact us',
parent: 'home'
},
displayBreadCrumb:true
}
},
{
path: '*',
component: Error404
}
],
linkActiveClass: 'active',
mode: 'history'
})
router.beforeEach((to, from, next) => {
const requiresAuth = to.matched.some(record => record.meta.requiresAuth);
if(requiresAuth && !store.getters.isLoggedIn) {
next('/login');
} else {
next();
}
})
export default router