May I know how to implement this custom route in spartacus ?
product/:productCode/:name/order-form
I tried implementing this in my custom order-form-routes.module.ts
But it doesn't seem to recognize this config as it throws a Page Not Found error.
ConfigModule.withConfig({
routing: {
routes: {
orderForm: {
paths: ['product/:code/:name/order-form'],
paramsMapping: { code: 'code', name: 'name' },
},
},
},
}),
considering #Platonn's suggestion:
This config made it work:
RouterModule.forChild([
{
path: 'product/:code/:name/order-form',
canActivate: [AuthGuard, CmsPageGuard],
component: PageLayoutComponent,
data: { pageLabel: '/order-form' },
},
]),
Related
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 built 2 PWA based on Vue (with Vue UI templates, with router and PWA already set up) but I get on both the same issue: after I add to Homescreen on device, when I open it from the app icon, the router viez doesn't show up and stays blank until I click on a router link. I don't understand why.
Example of one of them, my portfolio:
URL Link
GitHub Link
Some parts of files here that I think related to the issue:
router.js:
export default new Router({
mode: 'history',
base: 'index.html',
routes: [
{
path: '/',
name: 'home',
component: Home
}
]
})
firebase.json:
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
Edit:
Checkout #webmint answer below, probably solve problem im better and clean way.
Orginal Post:
I solved my problem adding an alias to start page in routes (in my case "Login")
in manifest.json:
{
...
"start_url": "index.html",
...
}
in router config:
let router = new Router({
...
routes: [
{ path: '/index.html',
component: Login,
alias: '/'
},
{
path: '/',
name: 'login',
component: Login
},
...
Had same issue. Turns out that solution is quite simple. You have to add/change this in manifest.json
"start_url": "/",
"scope": "/"
At the risk of repeating kaligari's answer, I'd say that the required part is only
{ path: '/index.html', component: Home }
in the router config. You can also use an alias to make it look better on the client. Although, when used as a PWA, this makes no difference since the address bar is not visible.
{ path: '/index.html', component: Home, alias: '/' }
Add the following to your vue.config.js:
pwa: {
workboxOptions: {
navigateFallback: '/index.html',
},
},
If it can help someone, here is what worked for me (after trying a lot of the above solutions and other ones on the web...) :
Context: PWA with Vue.js CLI 3.
Problem: After installing the URL on the "desktop" through the "Add to home screen" option in Safari, clicking on the icon opened a white page.
The same on Android (Chrome) was working perfectly.
I solved it with the following config:
manifest.json
...
"start_url": "/index.html",
...
router.json (includes some Firebase config elements)
//......
const router = new Router({
mode: 'history',
base: process.env.BASE_URL,
routes: [
{
path: '/',
redirect: {
path: '/projects'
}
},
{
path: '/login',
name: 'Login',
component: Login,
},
{
path: '/projects',
name: 'Projects',
component: Projects,
meta: {
requiresAuth: true
}
},
//......
]
});
router.beforeEach((to, from, next) => {
const requiresAuth = to.matched.some(x => x.meta.requiresAuth);
const currentUser = firebase.auth().currentUser;
if (requiresAuth && !currentUser) {
next('/login');
} else if (requiresAuth && currentUser) {
next();
} else {
next();
}
});
export default router;
vue.config.js
module.exports = {
pwa: {
name: 'Xxxxxxxxxx',
themeColor: '#000000',
msTileColor: '#000000',
appleMobileWebAppCapable: 'yes',
appleMobileWebAppStatusBarStyle: 'black',
workboxOptions: {
navigateFallback: '/index.html',
},
}
};
Whether I do this
Vue.router.push({ path: '/beats/catalog/1' })
or this
Vue.router.push({ name: 'BeatsCatalog', params: { page: 1 } })
I get the same result:
[vue-router] missing param for named route "BeatsCatalog": Expected "page" to be defined.
Router:
{
path: '/beats',
components: {
navbar: Navbar,
default: { template: `<router-view/>` }
},
children: [{
name: 'BeatsCatalog',
path: 'catalog/:page',
components: {
default: () => import('#/views/BeatsCatalog')
},
props: { default: true }
},
{
path: 'upload',
name: 'BeatsUpload',
components: {
default: () => import('#/views/BeatsUpload')
}
},
],
meta: { requiresAuth: true }
}
What's causing the issue? I see nothing wrong with my setup, I'm doing everything like in the documentation.
Thanks.
#Giacoma,
In your data property on the component BeatsCatalog the page is undefined when initally loaded. Hence you get the error.
So to solve this wrap your router-link in v-if.
Reference for the same error with better explaination is here:
https://github.com/vuejs/vue-router/issues/986
I'm looking to acces to the news component from this file with path but it isn't working, I've used also to={...} but still don't work. Could anybody give a good link for any kind of documentation to fix it?
thanks
data() {
return {
settings: [{
title: "Profile"
}, {
title: "E-mail"
}, {
title: "News", path: "./News",
}, {
title: "Custom"
}, {
title: "Edit"
}
]
}
}
router should be set up like this
export default new Router({
mode: 'hash',
routes: [{
path: '/',
component: Home
},
{
path: '/login',
component: Login
}
]})