TypeError: Cannot read property 'replace' of undefined - VueJS

Question

I am trying to implement a simple authentication in vuejs by following this tutorial

But when I go to my browser I am getting this error in my console "TypeError: Cannot read property 'replace' of undefined". I have attached the screenshot of the same.

Here is my App.vue file

<template>
  <div id="app">
    <div id="nav">
      <router-link v-if="authenticated" to="/login" v-on:click.native="logout()" replace>Logout</router-link>
    </div>
    <router-view @authenticated="setAuthenticated" />
  </div>
</template>

<script>
    export default {
        name: 'App',
        data() {
            return {
                authenticated: false,
                mockAccount: {
                    username: "nraboy",
                    password: "password"
                }
            }
        },
        mounted() {
            if(!this.authenticated) {
                this.$router.replace({ name: "login" });
            }
        },
        methods: {
            setAuthenticated(status) {
                this.authenticated = status;
            },
            logout() {
                this.authenticated = false;
            }
        }
    }
</script>

<style>
  body {
    background-color: #F0F0F0;
  }
  h1 {
    padding: 0;
    margin-top: 0;
  }
  #app {
    width: 1024px;
    margin: auto;
  }
</style>

Here is my Login component.

<template>
    <div id="login">
        <h1>Login</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" v-on:click="login()">Login</button>
    </div>
</template>

<script>
    /* eslint-disable no-console */

    export default {
        name: 'Login',
        data() {
            return {
                input: {
                    username: "",
                    password: ""
                }
            }
        },
        methods: {
            login() {
                if(this.input.username !== "" && this.input.password !== "") {
                    if(this.input.username === this.$parent.mockAccount.username && this.input.password === this.$parent.mockAccount.password) {
                        this.$emit("authenticated", true);
                        this.$router.replace({ name: "secure" });
                    } else {
                        console.log("The username and / or password is incorrect");
                    }
                } else {
                    console.log("A username and password must be present");
                }
            }
        }
    }
</script>

<style scoped>
    #login {
        width: 500px;
        border: 1px solid #CCCCCC;
        background-color: #FFFFFF;
        margin: auto;
        margin-top: 200px;
        padding: 20px;
    }
</style>

And here is my router

import Vue from 'vue'
import Router from 'vue-router'
import LoginComponent from "./components/Login"
import SecureComponent from "./components/Secure"

Vue.use(Router)

export default new Router({
    routes: [
        {
            path: '/',
            redirect: {
                name: "login"
            }
        },
        {
            path: "/login",
            name: "login",
            component: LoginComponent
        },
        {
            path: "/secure",
            name: "secure",
            component: SecureComponent
        }
    ]
})

Since I am new to vue I am not able to figure out the exact cause of this error. Any help is deeply appreciated.

Do you have the router loaded in the main.js ?

echefede
– echefede

2019-04-09 16:58:19 +00:00
Commented Apr 9, 2019 at 16:58 — echefede
– echefede, Commented Apr 9, 2019 at 16:58

echefede · Accepted Answer · 2019-04-09 16:58:54Z

2

It seems that your router is not working. In your main.js:

import router from '@/router'
new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

answered Apr 9, 2019 at 16:58

echefede

5364 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jan Sršeň · Accepted Answer · 2020-03-02 11:55:49Z

-1

Add dependencies:

npm install --save vue-router

it worked for my project

edited Mar 2, 2020 at 11:55

Jan Sršeň

1,0733 gold badges23 silver badges48 bronze badges

answered Mar 2, 2020 at 11:02

subash sapkota

814 bronze badges

Collectives™ on Stack Overflow

TypeError: Cannot read property 'replace' of undefined - VueJS

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related