Vue3 "export 'createWebHistory, createRouter' was not found in 'vue-router' - javascript

I'm creating a Vue3 application and after I added the router, my first page is loading but it's completely blank.
I'm receiving the following
Errors: Uncaught TypeError: Object(...) is not a function
In console:
Warning in ./src/router/index.js "export 'createRouter' was not found
in 'vue-router'
Warning in ./src/router/index.js "export 'createWebHistory' was not
found in 'vue-router'
router -> index.js
import { createWebHistory, createRouter } from "vue-router";
...
const routes = [{
path: "/user/create",
name: "createUser",
component: createUser,
},
{
path: "/users",
name: "listUser",
component: listUser,
meta: { requiresAuth: true }
},
{
path: "/user/show/:id",
name: "showUser",
component: showUser,
meta: { requiresAuth: true }
},
{
path: "/user/update/:id",
name: "updateUser",
component: updateUser,
},
{
path: "/login",
name: "login",
component: Login
},
{
path: "/register",
name: "register",
component: Register
},
{
path: "/users/bearer",
name: "bearer",
component: bearer,
meta: { requiresAuth: true }
}
]
const router = createRouter({
history: createWebHistory(),
routes,
});
router.beforeEach((to, from, next) => {
const requiresAuth = to.matched.some(record => record.meta.requiresAuth);
const isAuthenticated = firebase.auth().currentUser;
console.log("isauthenticated", isAuthenticated);
if (requiresAuth && !isAuthenticated) {
next("/login");
} else {
next();
}
});
export default router;

Found the answer to this here:
Stackoverflow question
You need to install the router via npm
npm install vue-router#next --save

Related

Ionic Vue components get stack on top of each other when using router

I have a problem, where when I use Vue Router for navigation, components don't disappear, the new one just places on top of old one.
My router file
import {createRouter, createWebHistory} from '#ionic/vue-router';
import {RouteRecordRaw} from 'vue-router';
import {AuthManager} from "#/functions/AuthManager";
import HomePage from '#/views/MainPage.vue';
import LoginScreen from '#/views/auth/LoginScreen.vue';
import component from "*.vue";
import RegistrationScreen from "#/views/auth/RegistrationScreen.vue";
import MainPage from "#/views/MainPage.vue";
const routes: Array<RouteRecordRaw> = [
{
path: '',
redirect: '/homepage',
},
{
path: '/login',
name: 'Login',
component: LoginScreen,
meta: {
requiresAuth: false
}
},
{
path: '/register',
name: 'Register',
component: RegistrationScreen,
meta: {
requiresAuth: false
}
},
{
path: '/home',
name: 'MainPage',
component: MainPage,
meta: {
requiresAuth: true
}
}
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes,
})
//code from https://stackoverflow.com/a/52663166 and modified to fit my needs
router.beforeEach(async (to, from, next) => {
if (to.matched.some(record => record.meta.requiresAuth)) {
// this route requires auth, check if logged in
// if not, redirect to login page.
if (!await AuthManager.isLoggedIn() && to.name != "Login") {
next({name: 'Login', hash: '#forced'});
} else if ((to.name == "Login" || to.name == "Register") && await AuthManager.isLoggedIn()) {
next({name: 'Homepage'});
} else {
next() // go to wherever I'm going
}
} else {
next() // does not require auth, make sure to always call next()!
}
})
export default router
How I navigate
<ion-text #click="() => router().push('/register')" style="cursor: pointer" class="ion-padding-top">Nemáte účet? Zaregistrujte se</ion-text>
Image of components stacked on top of each other
I can't find a way to make old component disappear. Where Am I doing something wrong?

"TypeError: next is not a function" in the router.js file of my vue 3 project when trying to apply navigation guards?

I don't understand why i doesn't recognise the next function whereas i followed a similar video implementing this and it worked with no errors
I don't understand why i doesn't recognise the next function whereas i followed a similar video implementing this and it worked with no errors
I don't understand why i doesn't recognise the next function whereas i followed a similar video implementing this and it worked with no errors
import Dashboard from "./Pages/Dashboard.vue";
import Customers from "./Pages/Customers.vue";
import EditProfile from "./Pages/EditProfile.vue";
import Insurance from "./Pages/Insurance.vue";
import Activations from "./Pages/Activations.vue";
import Login from "./Pages/Login.vue"
import ForgotPassword from "./Pages/ForgotPassword.vue"
import MyDashboard from "./Pages_cus/MyDashboard.vue";
import MyActivations from "./Pages_cus/MyActivations.vue";
import MyEditProfile from './Pages_cus/MyEditProfile.vue';
import NotFound from './Pages/NotFound.vue';
import NetworkError from './Pages/NetworkError.vue'
import { createRouter, createWebHistory } from "vue-router";
const routes = [
{
name: "MyDashboard",
component: MyDashboard,
path: "/my-dashboard",
meta: {
requiresAuth: true,
}
},
{
name: "MyActivations",
component: MyActivations,
path: "/my-activations",
},
{
name: "MyEditProfile",
component: MyEditProfile,
path: "/my-edit-profile",
},
{
name: "Dashboard",
component: Dashboard,
path: "/dashboard",
meta: {
requiresAuth: true,
}
},
{
name: "Customers",
component: Customers,
path: "/customers",
},
{
name: "EditProfile",
component: EditProfile,
path: "/edit-profile",
},
{
name: "Insurance",
component: Insurance,
path: "/insurance",
},
{
name: "Activations",
component: Activations,
path: "/activations",
},
{
name: "Login",
component: Login,
path: "/",
meta: {
requiresAuth: true,
}
},
{
name: "ForgotPassword",
component: ForgotPassword,
path: "/forgot-password",
},
{
name: "404Resource",
component: NotFound,
path: '/404/:resource',
props:true
},
{
name: "NetworkError",
component: NetworkError,
path: '/network-error'
},
{
name: "NotFound",
component: NotFound,
path: '/:catchAll(.*)'
},
];
const router = createRouter({
history: createWebHistory(),
routes,
});
router.beforeEach((to, next)=>{
if (to.matched.some(record => record.meta.requiresAuth)) {
if (localStorage.getItem('token') == null) {
console.log('Hello JS')
next({
path: '/',
params: { nextUrl: to.fullPath }
}) // I get the error at this level it doesn't recognise next as a function
}
else{
next();
}
}
else {
next()
}
})
export default router;
[Screenshot of code in VS code][1]
[Screenshot of code in browser
<!-- begin snippet: js hide: false console: true babel: false -->
import Dashboard from "./Pages/Dashboard.vue";
import Customers from "./Pages/Customers.vue";
import EditProfile from "./Pages/EditProfile.vue";
import Insurance from "./Pages/Insurance.vue";
import Activations from "./Pages/Activations.vue";
import Login from "./Pages/Login.vue"
import ForgotPassword from "./Pages/ForgotPassword.vue"
import MyDashboard from "./Pages_cus/MyDashboard.vue";
import MyActivations from "./Pages_cus/MyActivations.vue";
import MyEditProfile from './Pages_cus/MyEditProfile.vue';
import NotFound from './Pages/NotFound.vue';
import NetworkError from './Pages/NetworkError.vue'
import { createRouter, createWebHistory } from "vue-router";
const routes = [
{
name: "MyDashboard",
component: MyDashboard,
path: "/my-dashboard",
meta: {
requiresAuth: true,
}
},
{
name: "MyActivations",
component: MyActivations,
path: "/my-activations",
},
{
name: "MyEditProfile",
component: MyEditProfile,
path: "/my-edit-profile",
},
{
name: "Dashboard",
component: Dashboard,
path: "/dashboard",
meta: {
requiresAuth: true,
}
},
{
name: "Customers",
component: Customers,
path: "/customers",
},
{
name: "EditProfile",
component: EditProfile,
path: "/edit-profile",
},
{
name: "Insurance",
component: Insurance,
path: "/insurance",
},
{
name: "Activations",
component: Activations,
path: "/activations",
},
{
name: "Login",
component: Login,
path: "/",
meta: {
requiresAuth: true,
}
},
{
name: "ForgotPassword",
component: ForgotPassword,
path: "/forgot-password",
},
{
name: "404Resource",
component: NotFound,
path: '/404/:resource',
props:true
},
{
name: "NetworkError",
component: NetworkError,
path: '/network-error'
},
{
name: "NotFound",
component: NotFound,
path: '/:catchAll(.*)'
},
];
const router = createRouter({
history: createWebHistory(),
routes,
});
router.beforeEach((to, next)=>{
if (to.matched.some(record => record.meta.requiresAuth)) {
if (localStorage.getItem('token') == null) {
console.log('Hello JS')
next({
path: '/',
params: { nextUrl: to.fullPath }
}) // I get the error at this level it doesn't recognise next as a function
}
else{
next();
}
}
else {
next()
}
})
export default router;
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
[1]: https://i.stack.imgur.com/Y9D08.png
[2]: https://i.stack.imgur.com/n9ERj.png
next is the third argument for the beforeEach function, so it should be:
beforeEach((to, from, next)) => {...
While you're using the next function correctly here (ensuring that it's called exactly once), it is currently deprecated: https://github.com/vuejs/rfcs/blob/master/active-rfcs/0037-router-return-guards.md#motivation
It's now suggested to use 1 or 2 arguments and return a boolean value to indicate whether or not to proceed, or a route to redirect to:
router.beforeEach((to)=>{
if (to.matched.some(record => record.meta.requiresAuth)
&& localStorage.getItem('token') == null) {
//redirect
return {
name: '/',
query: { nextUrl: to.fullPath }
}
}
return true; //proceed (equivalent of next())
});

I cannot have similar router paths in Vue3

I'm just learning Vue3 and trying to do some routing, but I'm getting an error message that makes no sense.
Maybe it's related to some kind of nested routing, but I also tried to do children and it didn't want to work.
This works:
import { createRouter, createWebHistory } from 'vue-router';
import HomePage from '../home/HomePage.vue';
import FetchAccount from '../nonPrimaryADAccounts/FetchAccount.vue';
import CreateADAccount from '../nonPrimaryADAccounts/CreateADAccount.vue';
export default createRouter({
history: createWebHistory(),
routes: [
{
path: '/',
name: 'Home',
component: HomePage,
},
{
path: '/FetchAccount',
name: 'FetchAccount',
component: FetchAccount,
},
{
path: '/CreateADAccount',
name: 'CreateADAccount',
component: CreateADAccount,
},
],
});
And this does not:
import { createRouter, createWebHistory } from 'vue-router';
import HomePage from '../home/HomePage.vue';
import FetchAccount from '../nonPrimaryADAccounts/FetchAccount.vue';
import CreateADAccount from '../nonPrimaryADAccounts/CreateADAccount.vue';
export default createRouter({
history: createWebHistory(),
routes: [
{
path: '/',
name: 'Home',
component: HomePage,
},
{
path: '/NonPrimaryADAccount/FetchAccount',
name: 'FetchAccount',
component: FetchAccount,
},
{
path: '/NonPrimaryADAccount/CreateADAccount',
name: 'CreateADAccount',
component: CreateADAccount,
},
],
});
Error message:
4:29 error Unable to resolve path to module '../nonPrimaryADAccounts/CreateADAccount.vue' import/no-unresolved
If you need nested path the recommended approach is to use a function to generate the routes with the prefix:
const withPrefix = (prefix, routes) =>
routes.map( (route) => {
route.path = prefix + route.path;
return route;
});
export default createRouter({
history: createWebHistory(),
routes: [
{
path: '/',
name: 'Home',
component: HomePage,
},
...withPrefix('/NonPrimaryADAccount',[
{
path: '/FetchData',
name: 'FetchData',
component: FetchData,
},
{
path: '/CreateADAccount',
name: 'CreateADAccount',
component: CreateADAccount,
},
]),
]

Accessing cookies in Vue 3 router Typescript

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
const routes: Array<RouteRecordRaw> = [
{
path: '/login',
name: 'login',
component: () => import('../components/LoginComponent.vue'),
},
{
path: '/register',
name: 'register',
component: () => import('../components/RegisterComponent.vue'),
},
];
this.$cookies.get('name')
const router = createRouter({
history: createWebHistory(),
routes,
});
export default router;
object is possibly undefined for this
. I have also tried using this?.$cookies but then it says Property $cookies doesn't exist on type never
What other ways are there to access cookies in the Vue router?

VueJS 2, router guard

My index route is defined as:
{ path: '/', adminOnly: false, component: Main },
Is there a way to access the 'adminOnly' property?
There seems to be no way of doing so in this block of code:
routes.beforeEach((to, from, next) => {
console.log(to)
next();
});
My routes file:
import Vue from 'vue';
import VueRouter from 'vue-router';
import Main from '../components/Main.vue';
import About from '../components/About.vue';
const NotFoundException = {
template: '<div>Route Was Not Found</div>'
};
Vue.use(VueRouter);
const routes = new VueRouter({
mode: 'history',
hashbang: false,
linkActiveClass: 'active',
base: '/jokes',
routes: [
{ path: '/', adminOnly: false, component: Main },
{ path: '/about', adminOnly: false, component: About },
{ path: '*', adminOnly: false, component: NotFoundException }
]
});
routes.mode = 'html5';
routes.beforeEach((to, from, next) => {
// CHECK IF ADMINONLY EXISTS
next();
});
export default routes;
I did get a solution by adding a mixin of adminOnly.js which has the following code in it:
But then again, the mixin has to be added to each component if I was to redirect the user to the login page if not admin.
//Just a test
var isAdmin = false;
export default {
beforeRouteEnter (to, from, next) {
if(!isAdmin) {
next((vm) => {
vm.$router.push('/login');
});
}
}
}
Yes there is better way to handle this. Every route object can have meta field. Just wrap adminOnly property in meta object:
routes: [
{ path: '/', meta: { adminOnly: false }, component: Main },
{ path: '/about', meta: { adminOnly: false }, component: About },
{ path: '*', meta: { adminOnly: false }, component: NotFoundException }
]
Check route for admin rights:
router.beforeEach((to, from, next) => {
if (to.matched.some(record => record.meta.adminOnly)) {
// this route requires auth, check if logged in
// if not, redirect to login page.
}
}
For more please check docs and I created little example on jsFiddle

Categories