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.
Related
I'm working on a Vue.js webapp. Recently I realized then when I want to change route (going home) from a Vuex action, it takes a lot of time and never end. It take 4600 MB RAM and 70% CPU.
Here is the indicted code:
impostaSelezionabili: ({ commit,dispatch }, payload) => {
commit("associazioniSelezionabiliImpostate", payload)
const prefe = payload.prefe
if (payload.associazioni.length == 1) {
commit("associazioneScelta", payload.associazioni[0].codAssociazione)
dispatch("toolbarManager/setToolbarVisibility", true, {root: true})
router.push({ path: '/' })
}
},
Everything works perfectly without router line, when I add router.push({ path: '/' }) it gets the problem.
Is there a way to solve?
Router config / Routes:
export const router = new Router({
mode: 'history',
routes: [
{ path: '/', component: HomePage, name: "Home", meta: "Home" },
{ path: '/servizi', component: ServiziPage, meta: "Servizi" },
{ path: '/servizi/:id', component: ServizioPage, meta: "Servizi" },
{ path: '/login', component: LoginForm},
{ path: '/corsi', component: Corsi, meta: "Corsi" },
{ path: '/corsidisponibili', component: Corsi, meta: "Corsi disponibili" },
// otherwise redirect to home
{ path: '*', redirect: '/', meta: "Home" }
]
});
Make sure that your router exists and that is not an import of vue-router. You need to use the router that you constructed with the new Router().
But I think that is the best way to solve it - that navigating inside a component after a Promise returned by that action will be resolved because in the current case your action isn`t pure.
this is propably basic question to ask but i have a problem with router settings. I have managed to build a nice, clean Views inside CMS system i am working on and my router settings looks like
const routes = [{
path: "/cms/dashboard/",
redirect: "/cms/dashboard/summary/"
}, {
path: "/cms",
name: "CMS",
component: CMS,
children: [{
id: ":id",
path: ":viewSlug",
name: "cmsView",
props: true,
component: () => import( /*webpackChunkName: "dashboard" */ "../views/CMS/CmsView.vue"),
children: [{
id: ":id",
path: ":childSlug",
name: "nestedRoute",
props: true,
component: () => import( /*webpackChunkName: "dashboard" */ "../views/CMS/NestedView.vue"),
children: [{
id: ":id",
path: ":secondChildSlug",
name: "nestedSecond",
props: true,
component: () => import( /*webpackChunkName: "dashboard" */ "../views/CMS/SecondNestedView.vue"),
}]
}]
}],
}];
so as you can see i am basically using only named routes which is neat because i can design all the pages i want in CMS to be just .json files that are included in store. The problem is redirecting seems not to work properly. The code:
{
path: "/cms/dashboard/",
redirect: "/cms/dashboard/summary/"
}
Works only when i refresh the page - so when I refresh a page when i am under /cms/dashboard - redirect works just fine, but when i go to "/cms/dashboard" via navigation - nothing happens. That's a little bit frustrating because i just want to always show child component as well as main component in every view.
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'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 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