I am developing a CRM with dozens of pages and using VueRouter for navigation. At the moment, the loading of the routes I am doing as follows (2 options):
Option 1:
const BrokerContactsDetails = () => import('src/pages/ContactsDetails.vue');
(...)
{
path: 'contacts/details/:id',
name: 'ContactsDetails',
components: {
default: BrokerContactsDetails
},
meta: {
requiresAuth: true,
roles: ['All'],
}
}
(...)
Option 2:
{
name: 'ContactsDetails',
path: 'contacts/details/:id', component: () => import('src/pages/ContactsDetails.vue'),
meta: {
requiresAuth: true,
roles: ['All'],
}
}
(...)
However, when I use the webpack-bundle-analyzer and enter "/", I realize that the page for this route is already loaded.
Printscreen: http://imageshack.com/a/img922/5/0vjBpw.png
Any tip to lazy load the page only when the route is accessed?
Thanks
Related
I have an app that uses vue router where the parent User route has the children Details, Pay, and Assignments. I would like to load all of the data from vuex when the parent User page loads and keep it alive until the parent is destroyed.
However, if I add this to the User (parent) layout, data is destroyed when switching between children.
In user.vue
<router-view :user="user" />
and
destroyed() {
this.$store.dispatch('clearUserState')
console.log('destroyed')
}
In router
{
path: '/users',
name: 'users',
component: () => import('../views/Users/Users.vue'),
meta: {
requiresAuth: true
},
},
{
path: '/users/:id', redirect: '/users/:id/details',
name: 'userHome',
component: () => import('../views/Users/User.vue'),
meta: {
requiresAuth: true
},
children: [
{
path: '/users/:id/details',
name: 'userDetails',
component: () => import('../views/Users/UserDetails.vue'),
props: true,
meta: {
requiresAuth: true
},
},
{
path: '/users/:id/assignments',
name: 'userAssignments',
component: () => import('../views/Users/UserAssignments.vue'),
props: true,
meta: {
requiresAuth: true
},
},
{
path: '/users/:id/payroll',
name: 'userPayroll',
component: () => import('../views/Users/UserPayroll.vue'),
props: true,
meta: {
requiresAuth: true
},
},
]
},
If the lifecycle hook on the parent isn't the correct place to clear my user data, should it be with some sort of navigation guard? or a watcher?
Thanks!
First, sorry for my bad english.
I'm learning about modular architecture / Folder By Feature in vue just like this
enter image description here
In user module I created a router like this
enter image description here
And add user's router to main router like this
enter image description here
Builder router is my apps routing after user logged in. And my main router is like this
enter image description here
What's happening is everything works fine when I access /dashboard or /about or other page that defined main router. And I click the /user router (it cames from user's module router) and it also work fine. But when I access /dashboard again. the router view show nothing (it is <!-- --> in dev console).
It's OK when access dashboard. Page displayed (white boxes)
enter image description here
Also OK in user module router
enter image description here
It became blank when I access /dashboard again
enter image description here
The structure of router-view
<router-view> Page Loader
<router-view> Module Loader (Index, Add, Edit)
This is my main router
const routes: Array<RouteRecordRaw> = [
{
path: '/',
name: 'Builder',
component: Builder,
meta: {
requiresAuth: true
},
redirect: '/dashboard',
children: [
{
path: 'dashboard',
name: 'Dashboard',
meta: {
pageTitle: 'Dashboard',
requiresAuth: true
},
component: () => import(/* webpackChunkName: "dashboard" */ '../views/Dashboard.vue')
},
{
path: 'about',
name: 'About',
meta: {
pageTitle: 'About',
requiresAuth: true,
breadcrumb: [
{
label: 'About',
to: '/about'
}
]
},
component: () => import(/* webpackChunkName: "about" */ '#/views/About.vue')
},
]
};
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
export default router
Registering Route
import router from '../router/index'
import store from '../store/index'
const registerModule = (name, module: any) => {
if (module.store) {
store.registerModule(name, module.store)
}
if (module.router) {
module.router.forEach(item => {
router.addRoute('Builder', item)
})
}
}
export const registerModules = (modules: any) => {
Object.keys(modules).forEach(moduleKey => {
const module = modules[moduleKey]
registerModule(moduleKey, module)
})
}
User Module Route
const moduleRoute = [{
path: '/user',
name: 'User',
component: () => import(/* webpackChunkName: "user" */ '../user/Module.vue'),
meta: {
pageTitle: 'User Management Builder',
requiresAuth: true,
breadcrumb: [
{
label: 'User',
to: '/user'
}
]
},
children: [
{
path: 'list',
name: 'UserList',
meta: {
pageTitle: 'User Management',
requiresAuth: true,
breadcrumb: [
{
label: 'User',
to: '/user'
}
]
},
component: () => import(/* webpackChunkName: "user" */ '../user/views/Index.vue')
},
{
path: 'add',
name: 'UserAdd',
meta: {
pageTitle: 'User Add',
requiresAuth: true,
breadcrumb: [
{
label: 'User',
to: '/user'
}
]
},
component: () => import(/* webpackChunkName: "user" */ '#/modules/user/views/Add.vue')
}
]
}]
export default moduleRoute
Extra Note:
I'm using webpack too in case it it affects my problem
Any help please. Thank you in advance.
I'm developing an app with Quasar, it compiles to Cordova app so I can run it on my phone. The weird thing is that I have that error only on my phone, without errors in console and only on the first load when app was installed.
I have a simple query
apollo: {
receipts: {
query: GET_RECEIPTS,
loadingKey: "loading",
},
},
and my component data is:
loading = 0;
#Watch("loading")
emitLoading(val) {
this.$apollo.mutate({
mutation: UPDATE_LOADING,
variables: { loading: !!val }
});
}
But the thing is when query cannot fetch anything (no data in DB), I get infinite loading. Should I fix with apollo error hook? And if yes how do I access loading data for the hook?
The solution wasn't obvious at all. I needed to change my route path for that page (homeManagement). Previously I had:
path: "/",
component: () => import("layouts/main-layout.vue"),
meta: { requiresAuth: true },
children: [
{
path: "",
name: "homeManagement",
component: () => import("pages/home-management/index.vue")
}
And now I have:
path: "/",
component: () => import("layouts/main-layout.vue"),
meta: { requiresAuth: true },
children: [
{
path: "home",
name: "homeManagement",
component: () => import("pages/home-management/index.vue")
}
I didn't figured out why is that. And btw path: "/" for homeManagement also gives me that issue with loading.
I'm a beginner using Webpack, NPM and VueJS.
I dont know what I did and I can't find any solution on internet.
When I run the command npm run dev in VueJS, webpack creates 15 files numbered from 0.js to 14.js
The files first lines are :
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[0],{
Where 0 in the file name
Anyone knows what I broke in my app ?
EDIT:
I figured out that every file is related to One component.
And I guess that this is in relation with my router file :
import Vue from 'vue';
import Router from 'vue-router';
Vue.use(Router);
function loadView(view) {
return () => import(`../components/${view}.vue`);
}
function loadLayout(view) {
return () => import(`../components/_layouts/${view}.vue`);
}
const routes = [
// USER ROUTES
{
path: '/dashboard',
component: loadView('user/Dashboard'),
meta: {
layout: loadLayout('user/Layout'),
auth: "user"
},
name: 'user'
},
// SUPPLIER ROUTES
{
path: '/supplier',
component: loadView('supplier/Dashboard'),
meta: {
layout: loadLayout('supplier/Layout'),
auth: "supplier"
},
name: 'supplier'
},
// ADMIN ROUTES
{
path: '/admin',
component: loadView('admin/Dashboard'),
meta: {
layout: loadLayout('admin/Layout'),
auth: "admin"
},
name: 'admin'
},
// DEFAULT ROUTES
{
path: '/register',
component: loadView('auth/Register'),
meta: {
layout: loadLayout('home/Layout'),
auth: false
},
name: 'register'
},
{
path: '/login',
name: 'login',
component: loadView('auth/Login'),
meta: {
layout: loadLayout('home/Layout'),
auth: false
}
},
{
path: '/',
component: loadView('home/Home'),
meta: {
layout: loadLayout('home/Layout'),
auth: undefined
},
name: 'home'
},
// otherwise redirect to home
{
path: '*',
redirect: '/'
}
];
Vue.router = new Router({
hashbang: false,
mode: 'history',
routes
});
export default Vue.router;
To move those dynamic imports, you have to put this code in webpack.mix.js :
mix.webpackConfig({
output: {
chunkFilename: 'js/[name].js',
},
});
I'm trying to handle route middleware of the children route, but I got this error
Uncaught TypeError: route.children.some is not a function
The documentation are only shows the example for a single route but in this case, I have a children route that needs to be restricted.
Please take a look at my router configuration:
import Vue from 'vue'
import Router from 'vue-router'
import store from './store/index'
import Home from './views/home/Index.vue'
Vue.use(Router)
let router = new Router({
mode: 'history',
base: process.env.VUE_APP_BASE_URL,
linkActiveClass: 'is-active',
linkExactActiveClass: 'is-exact-active',
routes: [{
path: '/',
name: 'home',
component: Home,
meta: {
requiresAuth: true
}
},
{
path: '/login',
name: 'login',
// route level code-splitting
// this generates a separate chunk (login.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import('./views/auth/Login.vue'),
meta: {
requiresGuest: true
}
},
{
path: '/register',
name: 'register',
component: () => import('./views/auth/Register.vue'),
meta: {
requiresGuest: true
}
},
{
path: '/forgot-password',
name: 'forgot-password',
component: () => import('./views/auth/extras/ForgotPassword.vue'),
meta: {
requiresGuest: true
}
},
{
path: '/database',
name: 'database',
component: () => import('./views/database/Index.vue'),
meta: {
requiresAuth: true
}
},
{
path: '/third-parties',
name: 'third-parties',
component: () => import('./views/third-parties/Index.vue'),
meta: {
requiresAuth: true
}
},
{
path: '/editor',
name: 'editor',
meta: {
requiresAuth: true,
requiresAdmin: true,
requiresEditor: true,
},
children: {
path: ':appSlug/layout-editor/:pageSlug',
name: 'layout-editor',
component: () => import('./views/editor/Index.vue'),
}
},
]
})
router.beforeEach((to, from, next) => {
const isLoggedIn = store.getters['auth/isLoggedIn'];
// Role getters
const isAdmin = (store.getters['auth/isAdmin'] == 'admin') || (store.getters['auth/isAdmin'] == 'super-admin');
const isEditor = store.getters['auth/isEditor'] == 'editor';
// Redirect to the login page if the user is not logged in
// and the route meta record is requires auth
if (to.matched.some(record => record.meta.requiresAuth) && !isLoggedIn) {
next('/login')
}
// Redirect to the homepage page if the user is logged in
// and the route meta record is requires guest
if (to.matched.some(record => record.meta.requiresGuest) && isLoggedIn) {
next('/')
}
// Redirect to the preview page if the user is logged in
// but has no role assigned or the role is user
if (to.matched.some(record => (
record.meta.requiresAuth &&
record.meta.requiresAdmin &&
record.meta.requiresEditor)) && !isAdmin && !isEditor) {
next('/preview')
}
// Pass any access if not match two conditions above
next()
})
export default router
Could somebody please explain it? Why I getting this error and how to fix it?
Thanks in advance.
I just found the answer, kinda silly tho.. I forgot to put square brackets on the children props. Now it's working as I expected.
fix:
{
path: '/editor',
name: 'editor',
meta: {
requiresAuth: true,
requiresAdmin: true,
requiresEditor: true,
},
children: [{
path: ':appSlug/layout-editor/:pageSlug',
name: 'layout-editor',
component: () => import('./views/editor/Index.vue'),
}]
},