Related
Update: I can see the url changing in the address bar but the page contents doesnt change.
I have just started learning vue js recently and I am currently facing an issue with deep nested routes. Whenever I try to access the deep nested route I encounter a 404. The route that gives me 404 is on "/classes/new".
Router.js
import { createRouter, createWebHistory } from "vue-router";
import AdminLayout from "./layouts/AdminLayout";
import NotFound from "./pages/NotFound";
const router = createRouter({
history: createWebHistory(),
routes: [
{
path: "/",
redirect: "dashboard",
component: AdminLayout ,
children: [
{
path: "/dashboard",
name: "dashboard",
component: () => import("./pages/Dashboard")
},
{
path: "/courses",
name: "courses",
component: () => import("./pages/Courses")
},
{
path: "/classes",
name: "classes",
component: () => import("./pages/Classes/Classes"),
children: [
{
path: "/new",
name: "new",
component: () => import("./pages/Classes/AddClass"),
}
]
},
{
path: "/categories",
name: "categories",
component: () => import("./pages/Categories")
}
]
},
{ path: "/:NotFound(.*)", component: NotFound }
]
});
export default router;
I think your children path should not start with a slash.
try path: "new" instead of path: "/new" ?
My application was working fine, until I changed my router.js file slightly to have child routes, and now my app is breaking, I can't see anything on any routes.
I get this error:
app.js:191 Uncaught TypeError: Cannot read property 'bind' of undefined
I can see that it points to this line:
var oldJsonpFunction = jsonpArray.push.bind(jsonpArray);
in this file /public/js/app.js inside this block of code:
// on error function for async loading
__webpack_require__.oe = function(err) { console.error(err); throw err; };
var jsonpArray = window["webpackJsonp"] = window["webpackJsonp"] || [];
var oldJsonpFunction = jsonpArray.push.bind(jsonpArray);
jsonpArray.push = webpackJsonpCallback;
jsonpArray = jsonpArray.slice();
for(var i = 0; i < jsonpArray.length; i++) webpackJsonpCallback(jsonpArray[i]);
/******/ var parentJsonpFunction = oldJsonpFunction;
Has anyone come across something like this? I tried searching on google and there wasn't that much about it, I found something that said they updated their cli#3.0.0-rc.5 to rc.6 and it solved it for that 1 person, but that didn't solve it for me.
Working router.js:
import Vue from 'vue';
import VueRouter from 'vue-router';
import Dashboard from './views/Dashboard';
import Login from './views/Login';
import Register from './views/Register';
import Forms from './views/Forms';
import CandidateProfileCreate from './views/candidate/CandidateProfileCreate';
import CandidateProfileIndex from './views/candidate/CandidateProfileIndex';
Vue.use(VueRouter);
const routes = [
{
path: '/',
name: 'dashboard',
component: Dashboard
},
{
path: '/candidate-profile/create',
name: 'candidate-profile-create',
component: CandidateProfileCreate
},
{
path: '/candidate-profile',
name: 'candidate-profile',
component: CandidateProfileIndex
},
{
path: '/login',
name: 'login',
component: Login
},
{
path: '/register',
name: 'register',
component: Register
},
{
path: '/forms',
name: 'forms',
component: Forms
}
]
const router = new VueRouter({
mode: 'history',
routes: routes,
linkActiveClass: 'active'
});
export default router;
Getting error, router.js:
import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from './views/Home';
Vue.use(VueRouter);
const routes = [
{
path: '/home',
component: Home,
children: [
{
path: '',
name: 'dashboard',
component: () => import('./views/Dashboard.vue')
},
{
path: 'candidate-profile',
name: 'candidate-profile-index',
component: () => import('./views/candidate/CandidateProfileIndex')
},
{
path: '/candidate-profile/create',
name: 'candidate-profile-create',
component: () => import('./views/candidate/CandidateProfileCreate')
},
],
},
{
path: '/login',
name: 'login',
component: () => import('./views/Login.vue')
},
{
path: '/register',
name: 'register',
component: () => import('./views/Register.vue')
},
{
path: '/forms',
name: 'forms',
component: () => import('./views/Forms.vue')
}
]
const router = new VueRouter({
mode: 'history',
routes: routes,
linkActiveClass: 'active'
});
export default router;
You must create children in object you want.
Like this
if you put path of father element to his children
this page will be open when page create
{
path: '/home',
component: Home,
children: [
{
path: '/home',
name: 'dashboard',
component: () => import('./views/Dashboard.vue')
},
{
path: 'candidate-profile',
name: 'candidate-profile-index',
component: () => import('./views/candidate/CandidateProfileIndex')
},
{
path: '/candidate-profile/create',
name: 'candidate-profile-create',
component: () => import('./views/candidate/CandidateProfileCreate')
},
],
},
Can't figure out how to set up routing and why the current configuration doesn't work.
What I'm trying to accomplish:
URL structure:
http://example.com/en
http://example.com/en/about-us
http://example.com/en/sample-page
http://example.com/fr
http://example.com/fr/about-us
http://example.com/fr/sample-page
To handle proper redirection I setup beforeEach:
router.beforeEach((to, from, next) => {
const lang = to.params.lang;
if ( !['en','fr'].includes(lang) ) {
return next('en');
}
if ( i18n.locale !== lang ) {
i18n.locale = lang;
}
return next();
});
And here is the part which I do not understand, why it's not working, why Home component not loading at all.
router.js
export default new Router({
mode: 'history',
base: process.env.BASE_URL,
routes: [
{
path: '/:lang',
children: [
{
path: '',
name: 'home',
component: Home,
}
],
},
],
})
Language (locale) switching working fine.
You need a component to render route /:lang. You can create a file and add <router-view/> inside or create some anonymous component like:
export default new Router({
mode: 'history',
base: process.env.BASE_URL,
routes: [
{
path: '/:lang',
component: {
render: h => h('router-view')
},
children: [
{
path: '',
name: 'home',
component: Home,
}
],
},
],
})
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: []
})
I'm having problems to make my http://localhost:8080/myapps/config route load. If I use http://localhost:8080/myapps everything works ok and I get a list of my apps. But when I want to access an app config through http://localhost:8080/myapps/config it loads the content of /myapps again. However, the url in my browser shows the correct path /myapps/config.
I have been checking the routher for some hours but everything seems to be ok. Could anybody shed some light?
My router file:
import Vue from 'vue'
import Router from 'vue-router'
const MyApps = () => import('../views/app/subviews/MyApps');
const AppKeyValue = () => import('../views/app/subviews/AppKeyValue');
import MainView from '../views/app/MainView'
Vue.use(Router)
export default new Router({
mode: 'history',
routes:
[
{
path: '/',
component: MainView,
redirect: 'myapps',
children:
[
{
path: 'myapps',
component: MyApps,
meta:
{
requiresAuth: true,
breadcrumb: 'My Apps'
},
children:
[
{
path: 'config',
component: AppKeyValue,
meta:
{
requiresAuth: true,
breadcrumb: 'App configuration'
}
},
]
},
]
},
]
})
Everything works ok if I don't use child routes:
export default new Router({
mode: 'history',
routes:
[
{
path: '/',
component: MainView,
redirect: 'myapps',
children:
[
{
path: 'myapps',
component: MyApps,
meta:
{
requiresAuth: true,
title: 'message.ecommerce',
breadcrumb: 'My Apps'
},
},
{
path: 'myapps/config',
component: AppKeyValue,
meta:
{
requiresAuth: true,
title: 'message.ecommerce',
breadcrumb: 'App configuration'
}
}
]
}
]}
You didn't post your *.vue components, but I assume you're missing <router-view> in the second level component.
Example:
MainView is mapped to / and has 1 children route (/myapps). You're probably using <router-view> in your MainView.
MyApps is mapped to myapps as a children of the /-route and has 1 children route (/config).
Add a <router-view to your MyApps.vue to let it display its children (which is just /config in your case).
Similarly, a rendered component can also contain its own, nested <router-view>.
https://router.vuejs.org/guide/essentials/nested-routes.html#nested-routes
BTW: That's also why your second router config is working: The main route has two children (/myapps and /myapps/config), which both get displayed by the MainView's <router-view>.
Here is a working example from the documentation:
https://jsfiddle.net/nazgul_mamasheva/zrcLe9z7/1/