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" ?
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.
I'm trying to get some localized url for my current project. So far I made a Lang dropdown that save the language in local storage for the next access to the website, Translations are imported from .json (with the help of vite-plugin-vue-i18n) files and work. So the translation is working The route that is commented work but when I introduce a Lang variable. I get: TypeError: guard.call is not a function. Any idea ?
Router.js
import {createRouter, createWebHistory} from "vue-router";
import Home from '../pages/Home.vue'
import About from '../pages/About.vue'
import i18n from '../locales/i18n'
/*const routes = [
{
path: '/',
name: 'Home',
component: Home,
},
{
path: '/about',
name: 'About',
component: About,
}
]*/
let locale = 'en'
if(localStorage.getItem('lang')) {
locale = localStorage.getItem('lang')
}
i18n.locale = locale;
const routes = [
{
path: '/',
redirect: `/${i18n.locale}`
},
{
path: `/${i18n.locale}`,
component: {
beforeRouteEnter: `/${i18n.locale}`,
beforeRouteUpdate: `/${i18n.locale}`,
render(h) { return h('router-view'); }
},
children: [
{
path: '/',
name: 'home',
component: Home,
},
{
path: 'about',
name: 'about',
component: About,
}
]
}
]
const router = createRouter({
history: createWebHistory(),
routes,
})
export default router;
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'),
},
]
},
]
});
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')
},
],
},
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;