I have a route and sub route like these.
export default new Router({
routes: [
{
path: '/user',
component: UserView,
meta: {title: 'User Manager'},
children: [
{path: 'editor', component: EditorView, meta: {title: 'User Editor'}}
]
}
]
})
In UserView and EditorView both have mounted function.
export defaults {
mounted () {
console.log(this.$route)
}
}
And i type http://host:port/#/user/editor in browser, the console print twice $route data and they is same object. How could i get UserView route data?
{name: undefined, meta: {…}, path: "/user/editor", hash: "", query: {…}, …}
{name: undefined, meta: {…}, path: "/user/editor", hash: "", query: {…}, …}
UserView and EditorView is in the same page and they html look like this picture.
There are multiple route parts that are matched for a given URL when nested routes are involved. You'll need to search this.$route.matched for the specific route that you are interested in.
If you set a name for the route you're interested in, it'll make it easier to find:
{
path: 'editor',
name: 'editor', // <-- Add this
component: EditorView,
meta: {
title: 'User Editor'
}
}
mounted() {
const route = this.$route.matched.find(r => r.name === 'editor');
console.log(route.meta.title);
}
Related
First, sorry for my bad english.
I'm learning about modular architecture / Folder By Feature in vue just like this
enter image description here
In user module I created a router like this
enter image description here
And add user's router to main router like this
enter image description here
Builder router is my apps routing after user logged in. And my main router is like this
enter image description here
What's happening is everything works fine when I access /dashboard or /about or other page that defined main router. And I click the /user router (it cames from user's module router) and it also work fine. But when I access /dashboard again. the router view show nothing (it is <!-- --> in dev console).
It's OK when access dashboard. Page displayed (white boxes)
enter image description here
Also OK in user module router
enter image description here
It became blank when I access /dashboard again
enter image description here
The structure of router-view
<router-view> Page Loader
<router-view> Module Loader (Index, Add, Edit)
This is my main router
const routes: Array<RouteRecordRaw> = [
{
path: '/',
name: 'Builder',
component: Builder,
meta: {
requiresAuth: true
},
redirect: '/dashboard',
children: [
{
path: 'dashboard',
name: 'Dashboard',
meta: {
pageTitle: 'Dashboard',
requiresAuth: true
},
component: () => import(/* webpackChunkName: "dashboard" */ '../views/Dashboard.vue')
},
{
path: 'about',
name: 'About',
meta: {
pageTitle: 'About',
requiresAuth: true,
breadcrumb: [
{
label: 'About',
to: '/about'
}
]
},
component: () => import(/* webpackChunkName: "about" */ '#/views/About.vue')
},
]
};
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
export default router
Registering Route
import router from '../router/index'
import store from '../store/index'
const registerModule = (name, module: any) => {
if (module.store) {
store.registerModule(name, module.store)
}
if (module.router) {
module.router.forEach(item => {
router.addRoute('Builder', item)
})
}
}
export const registerModules = (modules: any) => {
Object.keys(modules).forEach(moduleKey => {
const module = modules[moduleKey]
registerModule(moduleKey, module)
})
}
User Module Route
const moduleRoute = [{
path: '/user',
name: 'User',
component: () => import(/* webpackChunkName: "user" */ '../user/Module.vue'),
meta: {
pageTitle: 'User Management Builder',
requiresAuth: true,
breadcrumb: [
{
label: 'User',
to: '/user'
}
]
},
children: [
{
path: 'list',
name: 'UserList',
meta: {
pageTitle: 'User Management',
requiresAuth: true,
breadcrumb: [
{
label: 'User',
to: '/user'
}
]
},
component: () => import(/* webpackChunkName: "user" */ '../user/views/Index.vue')
},
{
path: 'add',
name: 'UserAdd',
meta: {
pageTitle: 'User Add',
requiresAuth: true,
breadcrumb: [
{
label: 'User',
to: '/user'
}
]
},
component: () => import(/* webpackChunkName: "user" */ '#/modules/user/views/Add.vue')
}
]
}]
export default moduleRoute
Extra Note:
I'm using webpack too in case it it affects my problem
Any help please. Thank you in advance.
I have a SPA App in Vue JS, I have a side navigation bar which I want to stay visible for all pages. I have following links setup in side navigation bar
{
name: 'Overview',
icon: 'ti-dashboard',
path: 'overview',
},
{
name: 'Areas',
icon: 'ti-map-alt',
path: 'areas',
},
{
name: 'Assignments',
icon: 'ti-check-box',
path: 'assignments',
},
{
name: 'Records',
icon: 'ti-view-list-alt',
id: 'third-party',
children: [
{
name: 'Vaccination',
path: 'vaccination',
},
{
name: 'Out-of-Area Vaccinations',
path: 'vaccination/outer',
},
{
name: 'Surveys',
path: 'survey',
},
{
name: 'Archived',
path: 'archived',
},
],
}
...
Following is my router setup
const routes = [
{
path: '/',
component: App,
},
{
path: '/login',
component: require('../../../assets/js/components/Template/AppLogin.vue'),
},
{
path: '/platform/projects',
component: require('../../../assets/js/components/Template/Projects.vue'),
meta: {requiresAuth: true},
},
{
path: '/project/:projectId',
component: require('../../../assets/js/components/Template/UIComponents/SidebarPlugin/SideBarNew.vue'),
props: route => ({projectId: route.params.projectId}),
children: [
{
path: 'overview',
component: require('../../../assets/js/components/Template/mvdProjectOverview.vue'),
},
{
path: 'areas',
component: require('../../../assets/js/components/Template/AddVaccinationArea.vue'),
},
{
path: 'assignments',
component: require('../../../assets/js/components/Template/AssignAreaUsers.vue'),
},
{
path: 'vaccination',
component: require('../../../assets/js/components/Template/VaccinationRecord.vue'),
},
{
path: 'vaccination/outer',
name: 'projectOuterVaccinations',
component: require('../../../assets/js/components/Template/OuterVaccinations.vue'),
},
{
path: 'archived',
name: 'projectOuterVaccinations',
component: require('../../../assets/js/components/Template/ArchivedRecords.vue'),
},
{
path: 'survey',
component: require('../../../assets/js/components/Template/Surveys.vue'),
},
...
const router = new VueRouter({
routes,
mode: 'history'
})
When I visit vaccination/outer All of my side bar navigation links are appended with vaccination
Attaching images for more clarity
Here the URL is good and should stay like this only
When I navigate to vaccination/outer
The issue: Now all the links gets vaccination in between
I have a very basic knowledge of VUE ROUTER and ROUTER LINK. A help or guidance would be great. Thanks in advance.
I am pretty sure you are using paths from presented array as: <router-link to="LINK">some label</router-link>. However, as your path values are not starting with / - vue router will add value of to property to the current URL instead of replace it.
Let's imagine I am on /a/b/c URL.
When I click on <router-link to="dogs">Dogs</router-link> - I will be redirected to the /a/b/c/dogs.
When I click on <router-link to="/dogs">Dogs</router-link> - I will be redirected to the /dogs.
All you need to do is, start paths with the slash. So instead of path: vaccination/outer use path: /vaccination/outer and it will work as you want to.
I have a problem with dynamic routes in my vue.js application. When i enter page from a routerLink click everything works as it should. But when i refresh that page or i enter there from normal href the page acts weird. It looks then like it's not loading static assets like styles which were reset in public/style.css. Also component lifecycle methods are not firing up (created(), mounted() etc.).
Reproduction here:
1. Enter https://blooming-dusk-66903.herokuapp.com/profiles
2. Enter on one of profiles
3. Refresh when on https://blooming-dusk-66903.herokuapp.com/profiles/*******
here is my router file
Vue.use(Router);
export default new Router({
mode: "history",
routes: [
{
path: "/landing",
name: "Landing",
component: Landing
},
{
path: "/register",
name: "RegisterForm",
component: RegisterForm
},
{
path: "/",
name: "Dashboard",
component: Dashboard
},
{
path: "/profile",
name: "UserProfile",
component: UserProfile
},
{
path: "/profile/:id",
name: "Profile",
component: Profile
},
{
path: "/edit-profile",
name: "EditProfile",
component: EditProfile
},
{
path: "/friends",
name: "Friends",
component: Friends
},
{
path: "/profiles",
name: "Profiles",
component: Profiles
},
{
path: "/friend-requests",
name: "FriendRequests",
component: FriendRequests
},
{
path: "/post/:id",
name: "Post",
component: Post
},
{
path: "/chat/:handle",
name: "ChatWith",
component: ChatWith
}
]
});
I have my routes as define below:
const router = new Router({
base: '/',
mode: 'history',
routes: [
{
path: '/',
redirect: `${DEFAULT_LOCALE}`,
},
{
path: '/:locale?',
component: AppTemplate,
children: [
{
path: 'home',
name: 'home',
component: () => import('#/views/Home.vue'),
meta: {
title: 'Home',
}
}
{
path: 'about',
name: 'about',
component: () => import('#/views/About.vue'),
meta: {
title: 'About',
},
},
{
path: 'contact',
name: 'contact',
component: () => import('#/views/Contact.vue'),
meta: {
title: 'Contact',
},
},
{
path: '*',
redirect: { path: '/' },
},
],
},
{
path: '*',
redirect: { path: '/' },
},
],
});
export default router;
I use :locale for app translation. It is optional because empty locale is for default language. My problem here is even if locale is present, all the links to other pages are without the locale, if that makes sense. For eg, example.com/about is in Italian and example.com/en/about is in English. But which ever URL it is, the links present on the page always points to contact or home page as example.com/contact and example.com/home. Is there a way to fix this? Or is there an easier way to use app translation from URL. I am using vue-i18n for the translation. Thanks
For such configuration I think you have to pass param to make it work:
<router-link :to="{name: 'contact', params: {locale: $route.params.locale} }">
https://jsfiddle.net/3gx4hak5/
Also maybe router-link append attribute will do the trick for you: https://router.vuejs.org/api/#append
Setting append prop always appends the relative path to the current path. For example, assuming we are navigating from /a to a relative link b, without append we will end up at /b, but with append we will end up at /a/b.
<router-link :to="{ path: 'relative/path'}" append></router-link>
I need to access the route params from inside the route children meta, so I can do a fetch and get another value. In this example, I want to get the id from params, so I can run a function and get the user name with this id and use it in the meta field. Is this possible?
path: '/user/:id',
component: User,
props: true,
beforeEnter: requireAuth,
children: [
{
path: '',
name: 'user',
component: UserOverview,
meta: {
breadcrumb: [
{name: 'Users', params: {name: 'users'}},
{name: getUserName(id)}
]
}
}, {...
beforeEach hook might help.
router.beforeEach((to, from, next) => {
if (!to.meta.breadcrumb) {
to.meta.breadcrumb = 'your_content'
}
next()
})