vue.js - vue-router 与参数链接（刷新时出错？）

Question

为什么当我从“路由器链接”定向到带有参数的组件时，该参数有效，但是当刷新页面时却没有？（情况说明如下）

routes.js包含这两个路径：

{
    path: '/myspaces',
    name: 'myspaces',
    component: MySpaces
},

{
    path: '/myspaces/:spaceID',
    name: 'returnToSpaces',
    component: MySpaces,
    props: true
}

它背后的概念是我通过 a 将 spaceID<router-link>从一页传递到另一页。这行得通。spaceID正确传递。

Room.vue - 有一个到 MySpaces.vue 的路由器链接

    <router-link :to="{ name: 'returnToSpaces', params: { spaceID: spaceID } }">
        <v-btn>
            <h3> go back </h3>
        </v-btn>
    </router-link>

当我打开room.vue并单击按钮时，它会将我重定向到正确myspaces.vue的链接myspaces/1，并带有 spaceID。但是，如果我myspaces/1手动输入而不是被重定向，它就不起作用。它给了我错误：Cannot read property 'rooms' of undefined。这个道具链接到spaceID，所以很可能当我刷新它时，它不会将/1链接到spaceID参数？

我的空间.vue

<template>
    <v-container>

                    <v-layout>
                        <!-- My spaces -->
                        <v-flex md8 xs12>
                            <v-layout row wrap>
                                <!-- The rooms, allRoomsObj returns all rooms in the space with the id of selectedSpace. -->

                                <v-flex v-for="room in allRoomsObj"
                                        :key="room.id"
                                        xs12
                                        sm6
                                        md6
                                        lg6
                                        :class="{'roomDesktop': !$vuetify.breakpoint.xs, 'roomMobile': $vuetify.breakpoint.xs}"
                                >
                                    <!-- A room -->
                                    <v-card class="card-round">
                                        <!-- Image -->
                                        <v-carousel :cycle="false" hide-delimiters :hide-controls="room.images.length <= 1">
                                            <!--:hide-controls="images.length <= 1"-->
                                            <v-carousel-item v-for="image in room.images" :src="image.src" :key="image.id"></v-carousel-item>
                                        </v-carousel>
                                        <!-- Information -->
                                        <v-card-text primary-title>
                                            <v-layout>
                                                <v-flex xs11>
                                                    <!-- MISSING INFORMATION IN STORE -->
                                                    <h4 class="roomType"> <router-link :to="{ name: 'room', params: { spaceID: selectedSpaceObj[0].id, roomID: room.id  } }">{{ room.type }}</router-link> </h4>
                                                    <h2> {{ room.name }} </h2>
                                                </v-flex>
                                                <v-flex xs1 hidden-sm-and-down>
                                                    <v-btn @click="selectedRoom = room.id"
                                                           :flat="selectedRoom !== room.id"
                                                           :outline="selectedRoom !== room.id"
                                                           fab
                                                           class="selectRoomBtn"
                                                           depressed
                                                    >
                                                    </v-btn>
                                                </v-flex>
                                            </v-layout>
                                        </v-card-text>
                                    </v-card>
                                </v-flex>
                            </v-layout>
                        </v-flex>

                        <!-- Sidebar -->
                        <v-flex hidden-sm-and-down sm4 lg4 class="sidebarSticky">
                            <v-layout row wrap>
                                <!--1 room details, selectedRoomObj returns 1 room with id of selectedRoom, that is in the space with id selectedSpace.-->
                                <v-flex v-for="room in selectedRoomObj" :key="room.id">
                                    <v-card class="card-round">
                                        <!-- Show only 1 image -->
                                        <v-card-media v-for="image in room.images.slice(0,1)" :src="image.src" height="200px" :key="image.id">
                                        </v-card-media>

                                        <v-card-text>
                                            <!-- Side bar - room name -->
                                            <h2 class="sidebarRoomName"> {{ room.name }} </h2>
                                            <!-- description -->
                                            <p> {{ room.description }} </p>
                                            <!-- overview button-->
                                            <p> <router-link :to="{ name: 'room', params: { spaceID: selectedSpace, roomID: selectedRoom } }">room overview..</router-link></p>

                                            <!-- styles/pins/moodboard -->

                                        </v-card-text>
                                    </v-card>
                                </v-flex>
                            </v-layout>
                        </v-flex>

                    </v-layout>

                </v-container> <!-- End of MAIN CONTENT-->
</template>

<script>
    import { mapState } from 'vuex';

    export default {
        name: "myspaces",
        props: [
          'spaceID'
        ],
        data() {
            return {
                filterMaxLength: 3,
                selectedSpace: 0,
                selectedRoom: 0
            }
        },
        created() {
            // Default selected space (first in json)
            this.selectedSpace = this.spaces[0].id;
            // console.log("spaces " + this.spaces[0].id)

            if (this.spaceID != null) {
                this.selectedSpace = this.spaceID;
            }

            // Default selected room (first in json)
            this.selectedRoom = this.spaces[0].rooms[0].id;

            // If spaceID is received, change the room to the first room in that space.
            if (this.spaceID != null) {
                var backToSpace = this.spaces.filter(aSpace => aSpace.id == this.spaceID)
                this.selectedRoom = backToSpace[0].rooms[0].id
            }

        },
        computed: {
            // Get 'spaces' from store.
            ...mapState([
                'spaces'
            ]),
            // Grab all the rooms in the selected space.
            allRoomsObj() {
                if (!this.selectedSpaceObj) {
                    return {};
                } else {
                    return this.selectedSpaceObj[0].rooms;
                }
            },
            // Grab the space that with the id that equals to the selectedSpace.
            selectedSpaceObj() {
                if (!this.selectedSpace) {
                    return {};
                } else {
                    return this.spaces.filter(aSpace => aSpace.id === this.selectedSpace);
                }
            },
            // Grab the room in the selected space, with the room id that equals to selectedRoom.
            selectedRoomObj() {
                if (!this.selectedSpaceObj) {
                    return {};
                } else {
                    return this.selectedSpaceObj[0].rooms.filter(aRoom => aRoom.id === this.selectedRoom);
                }
            }
        }
}
</script>

我找到了错误的根源： 由于某种原因刷新下面的代码不起作用。即使this.selectedSpace值为（例如 1）。它不起作用，如果我用值 1 替换它，它确实起作用....？

this.spaces.filter(aSpace => aSpace.id === this.selectedSpace)

当我尝试更改created()为时beforeRouteEnter()出现错误：

标签： vue.jsvuejs2vue-componentvue-router

Answer 1

我认为问题可能是此代码中的类型严格比较（https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators）：

this.spaces.filter(aSpace => aSpace.id === this.selectedSpace)

您可以尝试将您的属性类型指定为id与this.spaces对象的类型相同吗？例如：

props: {
   spaceID: {
       required: true,
       type: Integer 
   }
}

spaceID如果不是同一类型，这应该会给你一个警告