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
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?
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'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,
},
]),
]
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?
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