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,
}
],
},
],
})
Related
I'm using vue cli and implemented a multiple page application in vue.config.js:
module.exports = {
pages: {
bla: {
entry: 'src/pages/bla/main.js',
template: 'public/index.html',
title: 'blaaaaa',
},
foo: {
entry: 'src/pages/foo/main.js',
template: 'public/index.html',
title: 'foooooo',
}
}
}
In /router/index.js:
import { createRouter, createWebHistory } from 'vue-router'
const routes = [
{ path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFoundView.vue },
{ path: '/', redirect: '/bla' },
{ path: '/bla', name: 'Bla', component: () => import('#/views/bla/BlaView.vue') },
{ path: '/foo', name: 'FooView', component: () => import('#/views/foo/MoiView.vue') },
{ path: '/foo/bar', name: 'FooBarView', component: () => import('#/views/foo/FooBarView.vue') },
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
export default router
All this works fine, but I don't see how to add a default route for root, although the documentation on Redirect and Alias seems clear. Going to '/' should redirect to '/bla' but vue isn't even detected on the page. Same problem with the NotFound page I tried: vue is not found.
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')
},
],
},
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 am trying to get the (current route name and meta defined in the router.js)
, in the layout component or App.vue
in the router.js
export default new Router({
routes: [
{
path: '/',
name: 'home',
meta: { layout: "default" },
component: () => import( './views/dashboard.vue')
},
]
what iam tring to do in App.vue ,
created() {
console.log(this.$route );
console.log( this.$route.meta.layout);
console.log( this.$router.params);
console.log( this.$currentRoute);
},
and nothing seem to work
I want to default to a specific page when user navigates to the root path
ie when used goes to myapp.com I want to redirect them to myapp.com/defaultpage
My current code is
index.js
import Full from '../containers/Full'
import DefaultView from '../views/DefaultView'
export default new Router({
mode: 'history',
linkActiveClass: 'open active',
scrollBehavior: () => ({ y: 0 }),
routes: [
{
path: '/',
redirect: '/defaultview',
name: 'home',
component: Full,
children: [
{
path: '/defaultview',
name: 'defaultview',
component: DefaultView
},
{
path: '*',
component: NotFoundComponent
}
}
]})
As it is when user goes to myapp.com I get a '404 page not found' - ie the NotFoundComponent. Only when I type in myapp.com/defaultview can I get to the correct page.
Any ideas?
Try this code:
routes: [
{
path: '/',
redirect: '/defaultview'
},
{
path: '/defaultview',
name: 'defaultview',
component: DefaultView
},
{
path: '*',
component: NotFoundComponent
}
]
When using children remove url prefix of the parent
ex:
change "/defaultview" to defaultview remove the parent path component, so the actual code should be like this
routes: [
{
path: '/',
redirect: '/defaultview',
name: 'home',
component: Full,
children: [
{
path: 'defaultview', /* changed */
name: 'defaultview',
component: DefaultView
},
{
path: '*',
component: NotFoundComponent
}
]
}
];
reference Nested Routes
This way is works for me
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
import Home from '../components/home/container';
import LiveAgent from '../components/live_agent/container';
import Bot from '../components/bot/container';
import User from '../components/user/container';
const routes = [
{
path: '/',
redirect: '/home'
},
{
component: Home,
name: 'home',
path: '/home'
},
{
component: LiveAgent,
name: 'live_agent',
path: '/live_agent'
},
{
component: Bot,
name: 'bot',
path: '/bot'
},
{
component: User,
name: 'user',
path: '/user'
}
];
export default new VueRouter({
routes // short for routes: routes
})
You can do it using 1 line of code, i.e. by adding router.replace("myPath");. Full code:
import Vue from "vue";
import Router from "vue-router";
import MyComponent from "./my-component";
Vue.use(Router);
const routes = [
{ path: "/myPath", name: "myPath", component: MyComponent }
];
const router = new Router({
mode: "history", // Remove the hash from the URL, optional.
routes
});
router.replace("myPath");
export default router;