Vue-router navigation Guard - vue.js

Question

I wanna make a router guard but I don't know why I cant.
setAuthentication ==true if part is okay but else part is not.
I want KrediForm page cant reachable only when setAuthentication is true
This code must be work but it won't work ı don't know why
Is there another way to make a router guard
IF you don't understand pls contact me
Now I have this code
<template>
<div>
<h1>Login page</h1>
<input type="text" name="username" v-model="input.username" placeholder="Username" />
<input type="password" name="password" v-model="input.password" placeholder="Password" />
<button type="button" #click="login">Login</button>
</div>
export default {
name: 'Login',
data() {
return {
input: {
username: "",
password: ""
}
}
},
methods: {
login() {
if(this.input.username == "admin" && this.input.password == "pass") {
this.$store.commit("setAuthentication", true);
this.$router.replace({ name: "KrediForm"});
// HERE WORKS FOR ME
} else {
console.log("The username or password is not correct");
}
}
}
}
main.js file
import { createApp } from 'vue';
import Vue3Autocounter from 'vue3-autocounter';
import VuePaycard from "vue-paycard";
import router from "#/router";
import Vuex from 'vuex'
import App from './App.vue';
import "#/assets/css/starter_style.css";
import "#/assets/css/main.css";
import veProgress from "vue-ellipse-progress";
const store = new Vuex.Store(
{
state: {
authenticated: false
},
mutations: {
setAuthentication(state, status) {
state.authenticated = status;
}
}
}
)
const app = createApp(App);
app.component('vue3-autocounter', Vue3Autocounter)
app.use(router);
app.use(Vuex);
app.use(veProgress);
app.use(VuePaycard);
app.use(store);
app.mount("#app");
router.js this is what trouble me the last few days
import {createRouter, createWebHistory} from "vue-router";
import store from '#/main'
const routes = [
{
name: "KrediForm",
path: "/Kredi_Form",
component: () => import("#/views/Kredi_Form"),
<!-- HERE MY ISSUE -->
beforeRouteEnter: (to, from, next) => {
if(store.state.authenticated == true) {
next({name: 'Login'});
console.log
} else {
next();
}
}
},
{
name: "DownloadSection",
path: "/DownloadSection",
component: () => import("#/views/DownloadSection")
},
{
name: "deneme",
path: "/deneme",
component: () => import("#/views/deneme"),
},
];
const router = createRouter({
routes,
history: createWebHistory()
});
// Template must be like
// router.beforeEach((to, from, next) => {
// if(loggedIn && to.path !== '/login') {
// next();
// } else {
// next('/login');
// }
// })
export default router;

Answer 1

first i think you are using pre-route guard wrong. keyword in here is beforeEnter and not beforeRouteEnter based on docs.
also you need to export and import properly like this:
export
export const store = ...
import
import {store} from '#/main'

Answer 2

this
solved my problem, copy that