vue-router 创建 link 但弹出控制台错误

Question

有人可以向我解释为什么我在控制台中出错

app.js:12666 TypeError: Cannot read property 'uuid' of undefined
    at Proxy.render (app.js:95774)
    at VueComponent.Vue._render (app.js:15384)
    at VueComponent.updateComponent (app.js:13674)
    at Watcher.get (app.js:14017)
    at new Watcher (app.js:14006)
    at mountComponent (app.js:13678)
    at VueComponent.Vue.$mount (app.js:19232)
    at VueComponent.Vue.$mount (app.js:21567)
    at init (app.js:14980)
    at createComponent (app.js:16419)

但是 link我在我的页面中得到的东西还好吗？

Vue 文件看起来像这样

<template>
    <div class="main-container">
        <h1 class="page-title">Protocols</h1>

        <div class="wrapper">
            <router-link :to="`/protocol/${protocolListObject.protocol.uuid}/edit`" class="dropdown-item">Click to edit</router-link>
        </div>

        </div>
</template>


<script>
    import moment from 'moment'

    export default {

        data() {
            return {
                protocolListObject: {},
                error: {},
            }
        },
        created() {
            axios.post('/getSingleProtocol/:uuid')
                .then((response) => this.protocolListObject = JSON.parse(response.data))
                .catch(error => console.log(error.response));
        },
        mounted() {

        }
    }
</script>

和app.js看起来像这样（我会删除路线和一些与此无关的东西只是为了让它更短）

window.Vue = require('vue');
import Vue from 'vue'
import VueRouter from 'vue-router'
import moment from 'moment'
Vue.use(VueRouter)
let ProtocolSummary = Vue.component('protocol-summary', require('./components/ProtocolSummary.vue'));
let ProtocolEdit = Vue.component('protocol-edit', require('./components/ProtocolEdit.vue'));

const routes = [
    { path: '/protocol/:uuid', component: ProtocolSummary },
    { path: '/protocol/:uuid/edit', component: ProtocolEdit },
]
const router = new VueRouter({
    mode: 'history',
    routes // short for `routes: routes`
})
Vue.prototype.moment = moment
const app = new Vue({
    router
}).$mount('#app');

但是当我加载页面时，我得到一个 link 和我需要的 UUID，但是那个控制台错误看起来很糟糕，我想摆脱它

Answer 1

yuriy 在上面的评论中说的问题是，最初，我的变量是空的。从 URL 添加变量解决了问题（在 vueJS 文件中）

        data() {
            return {
                protocolListObject: {
                    protocol: {
                        uuid: this.$route.params.uuid
                    }
                },
                error: {},
            }
        },

vue-router 创建 link 但弹出控制台错误

vue-router creating link but pops console error

javascript

vue-router

vuejs2