TypeError：无法读取未定义的属性“替换” - VueJS答案

【问题标题】：TypeError: Cannot read property 'replace' of undefined - VueJSTypeError：无法读取未定义的属性“替换” - VueJS
【发布时间】：2019-04-09 16:43:46
【问题描述】：

我正在尝试通过关注this tutorial 在 vuejs 中实现简单的身份验证

但是当我打开浏览器时，我在控制台中收到此错误“TypeError: Cannot read property 'replace' of undefined”。我附上了相同的屏幕截图。

这是我的 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 !== "" && 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>

这是我的路由器

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 新手，我无法弄清楚这个错误的确切原因。任何帮助都深表感谢。

【问题讨论】：

main.js 中加载了路由器吗？

标签： javascript authentication vue.js vue-router

【解决方案1】：

您的路由器似乎无法正常工作。在你的main.js:

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

【讨论】：

【解决方案2】：

添加依赖：

npm install --save vue-router

它适用于我的项目

【讨论】：