Ошибка типа: не удается прочитать свойство 'replace' неопределенного - VueJS

#javascript #authentication #vue.js #vue-router

#javascript #аутентификация #vue.js #vue-маршрутизатор

Вопрос:

Я пытаюсь реализовать простую аутентификацию в vuejs, следуя этому руководству

Но когда я захожу в свой браузер, я получаю эту ошибку в своей консоли «TypeError: не удается прочитать свойство ‘replace’ неопределенного». Я приложил скриншот того же самого.

Вот мой файл App.vue

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

Вот мой компонент входа в систему.

 <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 !== "" 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");
                }
            }
        }
    }
</script>

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

И вот мой маршрутизатор

 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
        }
    ]
})

Поскольку я новичок в vue, я не могу определить точную причину этой ошибки. Любая помощь будет высоко оценена.

Ответ №1:

Похоже, ваш маршрутизатор не работает. В вашем main.js :

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

Ответ №2:

Добавление зависимостей:

 npm install --save vue-router

это сработало для моего проекта