My App works just fine, if I put routes without childrens (nesting) but I tried to nest it just now and converted my routes to this: in routes.js
import alphabetsPage from './components/views/pages/alphabets.vue'
import dictionaryPage from './components/views/pages/dictionary.vue'
import numbersPage from './components/views/pages/numbers.vue'
import LayoutView from './components/views/Layout.vue'
const routes = [{
path: '/',
name: 'Home',
component: LayoutView,
children: [{
path: 'basic',
name: 'Basic',
component: alphabetsPage,
children: [{
path: 'alphabets',
name: 'Aphabets',
component: alphabetsPage
},
{
path: 'numbers',
name: 'Numbers',
component: numbersPage
}]
}]
}]
export default routes
If I go to / or click on route <router-link to="/basic/alphabets" tag="li"><a>numbers</a></router-link> I can see the alphabetsPage component, however if I go click on <router-link to="/basic/numbers" tag="li"><a>numbers</a></router-link> the route doesn't work. I have a numbersPage componet working.
This must be from the routes, because, if I don't use children and just define the path in routes as /basic/numbers or /basic/alphabets it works.
Children should be shown somewhere.
Your alphabetsPage do not have in template
const alphabetsPage = {
template: '<div>/basic/alphabets <router-view></router-view></div>'
}
https://jsfiddle.net/6fvL1xwc/
Related
When I need to ensure that a component is re-rendered upon reload, I pass a :key with a variable content:
<my-component :key="new Date()" />
I would need to do the same with a component which is called from the routing setup:
import { RouteRecordRaw } from 'vue-router';
import AuthPage from '../pages/AuthPage.vue'
const routes: RouteRecordRaw[] = [
{ path: '/', redirect: '/open' },
{ path: '/auth', component: MainLayoutVue, children: [{ path: '', component: AuthPage, name: 'auth' }], },
];
export default routes;
What is the correct way to pass a :key to the component AuthPage?
Explanation: I have App.vue, Management.vue, Login.vue and Register.vue pages. And I have another folder saying management_pages. In that management folder I have Products.vue and Suppliers.vue files.
What I'm expecting to do: In the App.vue I want the router-view to be for Management.vue, Login.vue and Register.vue only. And when we go to my /management route I want the router-view to be Products.vue (/products) and Suppliers.vue (/suppliers) since the layout of both files are in my Management.vue file. How can I handle such thing?
I have tried this:
import { createRouter, createWebHistory } from "vue-router";
import Products from "../pages/Products.vue";
import Suppliers from "../pages/Suppliers.vue";
import ErrorPage from "../pages/ErrorPage.vue";
import Login from "../pages/Login.vue";
const router = createRouter({
history: createWebHistory(),
routes: [
{
path: "/products",
name: "Products",
component: Products,
},
{
path: "/suppliers",
name: "Suppliers",
component: Suppliers,
},
{
path: "/:pathMatch(.*)*",
name: "ErrorPage",
component: ErrorPage,
},
{
path: "/login",
name: "Login",
component: Login,
},
],
});
export default router;
As stated in the comments, your question is vague, but since you are struggling I will try provide an answer. If I understand your question correctly, you want to define nested routes for /management/products and /management/suppliers.
First you need to add a <router-view></router-view> to your Management.vue component, where you want the content of Products.vue and Suppliers.vue.
Then you need to define the products and supplier routes as children of the management route, like:
routes: [
{
path: "/management",
name: "Management",
component: Management,
children: [
{
path: "products",
name: "Products",
component: Products,
},
{
path: "suppliers",
name: "Suppliers",
component: Suppliers,
},
]
},
{
path: "/login",
name: "Login",
component: Login,
},
{
path: "/:pathMatch(.*)*",
name: "ErrorPage",
component: ErrorPage,
},
],
Be sure to also import the Management.vue in your router file.
If you don't want /management to be a accessible route, you can define a redirect on the /management path to one of the children, like:
redirect: { name: 'Products' }
Hope this helps.
I have a simple Vue router setup from Laravel. I am trying to add a wildcard route because of a component that I will be using needs it. My Routes are:
import Dashboard from '#/components/Dashboard'
import MyFiles from '#/components/MyFiles'
import Error403 from '#/components/Error403'
import Error404 from '#/components/Error404'
export default [
{
name: 'index',
path: '/',
redirect: {
name: 'dashboard',
}
},
{
name: 'dashboard',
path: '/dashboard',
component: Dashboard,
props: true,
},
{
name: 'files',
path: '/dashboard/files/*', //Note the wildcard here.
component: MyFiles,
props: true,
},
{
name: '403',
path: '/403',
component: Error403,
},
{
name: '404',
path: '/404',
component: Error404,
},
{
name: 'catch-all',
path: '*',
component: Error404,
},
]
Everything appears to work. But when I click on my router-link for 'files' route. It goes to / and does not redirect but shows the files components. Very confusing...
Additionally I have this error in console:
[vue-router] missing param for named route "files": Expected "0" to be defined
Has anyone ran into this problem? Im very stumped as what to do. Any direction would be appreciated.
ADDITIONALLY
Here is the router-link that is the problem. Note that this is in a Blade File. the params are just strings.
<router-link
class="nav-link"
exact-active-class="active"
:to="{ name: 'files', params: { endpoint: '{{ route('myFiles') }}', endpointget: '{{ route('myFiles.get') }}' } }"
>
{{__('My Files')}}
</router-link>
Please reorder your routes.
The two last routes needs to be this
[{path: '/404'}, {path: '/'}, {path: *}]
From the more especific, to the more generic, thats it the correct match.
Next, i think if you remove "name" in the route * or in files route maybe fix the problem.
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/
I have an issue with lazy loading of my nested routes!
this is my parent route:
import ChildRoutes from "app/modules/child.route”;
routes: [
{
path: '/child',
component: resolve => require(['app/modules/root'], resolve),
children: ChildRoutes
}
]
and my child.route.js is
import ChildHome from …
import ChildContact from …
export default [
{
path: '',
name: 'childHome',
component: ChildHome
},
{
path: 'about',
name: 'childAbout',
// doesn’t work
component: resolve => require(['./components/about.vue'], resolve)
},
{
path: 'contact',
name: 'childContact',
// this one doesn’t work as well
component: ChildContact
},
...
]
Of course the first sub-rout (childHome) works automatically, but after that I just get blank pages with no component rendered!
If I load neither parent nor children lazily, everything will be fine!
What am I doing wrong?
Worth to mention my project uses vue 2.0, vue-router, vuex with SSR
I'm looking at two apparent problems.
First, it looks like your code diverges from the vue-router docs in calling require() instead of import().
See it here
https://router.vuejs.org/guide/advanced/lazy-loading.html
The improved version of your child.route.js file is
import ChildHome from "";
import ChildContact from "";
export default [
{
path: '',
name: 'childHome',
component: ChildHome
},
{
path: 'about',
name: 'childAbout',
component: () => import("./components/about.vue")
},
{
path: 'contact',
name: 'childContact',
component: ChildContact
},
]
There is a chance that this could resolve whatever lazy loading problems you may have. There is also a chance that it's inconsequential, and if so, read on.
Second issue, there is a bit of a conundrum with the /child route, and vue-router is picky with these kinds of things. Your parent route file has a component for the /child route:
path: '/child',
component: resolve => require(['app/modules/root'], resolve),
Then your child route file also has a component for this route:
path: '',
name: 'childHome',
component: ChildHome
In this case, the child '' route is the same as /child from the children. Vue is very likely confused when two components are loaded for one route. Clear this up and your problems should go away.
Parent route
import ChildRoutes from "app/modules/child.route”;
routes: [
...ChildRoutes,
]
child.route.js
export default [
{
path: '/child',
component: () => import ('#/app/modules/root'), <-- Just verify this path,
children: ...
}
]