类型错误：无法读取未定义的属性“替换” - 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.

Answer 1

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')

Answer 2

Add dependencies:

npm install --save vue-router 

it worked for my project