title: TypeError: Cannot read property 'replace' of undefined - VueJS
body: <p>I am trying to implement a simple authentication in vuejs by following  <a href="https://www.thepolyglotdeveloper.com/2018/04/simple-user-login-vuejs-web-application/" rel="nofollow noreferrer">this tutorial</a></p>
  
  <p>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. 
  <a href="https://i.stack.imgur.com/4Rxq8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4Rxq8.png" alt="enter image description here"></a></p>
  
  <p>Here is my App.vue file </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;template&gt;
    &lt;div id="app"&gt;
      &lt;div id="nav"&gt;
        &lt;router-link v-if="authenticated" to="/login" v-on:click.native="logout()" replace&gt;Logout&lt;/router-link&gt;
      &lt;/div&gt;
      &lt;router-view @authenticated="setAuthenticated" /&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      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;
              }
          }
      }
  &lt;/script&gt;
  
  &lt;style&gt;
    body {
      background-color: #F0F0F0;
    }
    h1 {
      padding: 0;
      margin-top: 0;
    }
    #app {
      width: 1024px;
      margin: auto;
    }
  &lt;/style&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here is my Login component. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;template&gt;
      &lt;div id="login"&gt;
          &lt;h1&gt;Login&lt;/h1&gt;
          &lt;input type="text" name="username" v-model="input.username" placeholder="Username" /&gt;
          &lt;input type="password" name="password" v-model="input.password" placeholder="Password" /&gt;
          &lt;button type="button" v-on:click="login()"&gt;Login&lt;/button&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      /* eslint-disable no-console */
  
      export default {
          name: 'Login',
          data() {
              return {
                  input: {
                      username: "",
                      password: ""
                  }
              }
          },
          methods: {
              login() {
                  if(this.input.username !== "" &amp;&amp; this.input.password !== "") {
                      if(this.input.username === this.$parent.mockAccount.username &amp;&amp; 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");
                  }
              }
          }
      }
  &lt;/script&gt;
  
  &lt;style scoped&gt;
      #login {
          width: 500px;
          border: 1px solid #CCCCCC;
          background-color: #FFFFFF;
          margin: auto;
          margin-top: 200px;
          padding: 20px;
      }
  &lt;/style&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>And here is my router </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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
          }
      ]
  })</code></pre>
  </div>
  </div>
  </p>
  
  <p>Since I am new to vue I am not able to figure out the exact cause of this error. Any help is deeply appreciated.</p>