Vue router (4) not adding the router-link-exact-active class when it is an exact match. It does add the router-link-active class but this means that there will be several active classes with some routes and dashboard will always be active due the /en part. I tried to add the exact attribute but this does not work.
router/index.js
const router = createRouter({
history: createWebHistory(),
routes: [
{
path: `/en`,
component: () => import('../Pages/Base.vue'),
children: [
{
path: '/en', name: 'dashboard', component: page('Users.vue'),
},
{
path: 'users', name: 'users', component: page('Users.vue'),
},
{
path: 'users/settings', name: 'users.settings', component: page('UsersSettings.vue'),
},
]
},
]
});
// link component (works)
<router-link :to="getToValue">
<slot />
</router-link>
Add linkExactActiveClass property
const router = createRouter({
history: createWebHistory(),
linkExactActiveClass: 'active',
routes: [
{
path: `/en`,
component: () => import('../Pages/Base.vue'),
children: [
{
path: '/en', name: 'dashboard', component: page('Users.vue'),
},
{
path: 'users', name: 'users', component: page('Users.vue'),
},
{
path: 'users/settings', name: 'users.settings', component: page('UsersSettings.vue'),
},
]
},
]
});
Related
I need to load a route outside the app.vue, I have a dashboard that works fine then I decided to implement a login which implied changing the app.vue, so after changing it I have the problem that my dashboard loads inside app.vue thus taking the styles of app.vue and completely deforming, so what now I need is to load outside of app.vue so it can work properly like it did before.
These are my routes:
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
mode: 'history', // to disappear the # in URL's
base: process.env.BASE_URL,
routes: [
//HOME
{
name: 'Home',
path: '/',
component: () => import('#/components/Home.vue'),
},
//LOGIN
{
name: 'Login',
path: '/login',
//component: () => import('#/views/login/Login'),
component: () => import('#/components/Login.vue'),
},
//REGISTER
{
name: 'Register',
path: '/register',
component: () => import('#/components/Register.vue'),
},
//DASHBOARD
{
//name: 'Dashboard',
path: '/dash',
name: 'dashboardd',
component: () => import('#/views/dashboard/Index'),
children: [
//CLIENTS
{
name: 'Clients',
path: '/Clients',
component:()=> import('#/views/clientss/Clientss')
},
//SALES
{
name: 'Sales',
path: '/sales',
component:()=> import('#/views/sales/Sales')
},
//NUEVA VENTA
{
name: 'Sales',
path: '/new-sale',
component:()=> import('#/views/sales/NewSale')
},
//productos
{
name: 'Productos',
path: '/products',
component:()=> import('#/views/articulos/Products')
},
//listar articulos
{
name: 'ListarArticulos',
path: '/articulos',
component:()=> import('#/views/articulos/ListarArticulos')
},
//crear articulo
{
name: 'CrearArticulo',
path: '/articulos/crear',
component:()=> import('#/views/articulos/CrearArticulo')
},
//editar articulo
{
name: 'EditarArticulo',
path: '/articulos/editar/:id',
component:()=> import('#/views/articulos/EditarArticulo')
},
// Dashboard
{
name: 'Dashboard',
path: '/dash',
component: () => import('#/views/dashboard/Dashboard'),
},
{
name: 'PROVEEDORES',
path: '/providers',
component: () => import('#/views/providers/Provider'),
},
{
name: 'USUARIOS',
path: '/users',
component: () => import('#/views/users/User'),
},
{
name: 'REPORTES',
path: '/reports',
component: () => import('#/views/reports/Report'),
},
// Pages
{
name: 'User Profile',
path: 'pages/user',
component: () => import('#/views/dashboard/pages/UserProfile'),
},
{
name: 'Notifications',
path: 'components/notifications',
component: () => import('#/views/dashboard/component/Notifications'),
},
{
name: 'Icons',
path: 'components/icons',
component: () => import('#/views/dashboard/component/Icons'),
},
// Maps
{
name: 'Google Maps',
path: 'maps/google-maps',
component: () => import('#/views/dashboard/maps/GoogleMaps'),
},
],
},
],
})
And I need to load the route named 'Dashboard' outside the App.vue. Because of my dashboard has his own styles and work properly when it is the only app running :
You can simply access the router from all components that are part of your Vue by using this.$router.
In Vue 2, you would need to call this.$router.push({name:'Dashboard'}) to instantly navigate to the route named 'Dashboard'.
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" ?
I have an Angular 8 app. In my router module I have something like this
const routes: Routes = [
{ path: '', component: HomeComponent },
{ path: ':code', component: CodeComponent },
{ path: 'not-found', component: NotFoundComponent},
{ path: '**', component: NotFoundComponent }
];
The problem here is that when I access (for an example) /not-found the component CodeComponent activates, but not the NotFoundComponent.
I want to distinguish /not-found page from parametrized /:code
Invert the order of your routes in your array so the 'not-found' definition comes before the ':code' definition. Like this
const routes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'not-found', component: NotFoundComponent},
{ path: ':code', component: CodeComponent },
{ path: '**', component: NotFoundComponent }
];
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 know we can go to a route by its name using $router.push({ name: 'route-name' }).
What I want to know is how to do that with a child route name.
This is my route structure:
export default [
{
path: '/',
name: 'home',
component: () => import('#/views/Home.vue'),
childs: [
{
name: 'home.about',
path: '/about',
component: import('#/views/Home/About.vue')
}
]
}
]
But my console says [vue-router] Route with name 'home.about' does not exist for $router.push({ name: 'home.about' }).
What I'm missing?
Obs: The idea is to not route to the child using a hard route path.
const router = new VueRouter({
routes: [{
path: '/foo',
name: 'foo',
component: Foo,
children: [
{
path: 'fooChild1',
name: 'fooChild1',
component: FooChildComponent
},
{
path: 'fooChild2',
name: 'fooChild2',
component: FooChildComponent
}
]
}, {
path: '/bar',
component: Bar
}]
})
Now if you wish to navigate to fooChild1 then use $router.push({ name: 'fooChild1' }) or if you wish to navigate to fooChild2 then use $router.push({ name: 'fooChild2' })
You have a typo.
It should be children and not childs.
export default [
{
path: '/',
name: 'home',
component: () => import('#/views/Home.vue'),
children: [
{
name: 'home.about',
path: '/about',
component: import('#/views/Home/About.vue')
}
]
}
]