问渲染子组件时出现的Vue嵌套路由问题

EN

import User from '@/components/User'
import UserQuotes from '@/components/UserQuotes'

export default new Router({
    mode: 'history',
    saveScrollPosition: true,
    base: __dirname,
    routes: [
        {
            path: '/user/:name',
            name: 'User',
            component: User,
            children: [
                {
                    path: 'quotes',
                    component: UserQuotes
                }
            ]
        }
    ]
})

<template>
    <div v-if="user" class="user">
        <h2>{{ user.name }}</h2>

        <ul class="list-group">
            <li v-for="(value, key) in user" class="list-group-item">{{ key }}: {{ value }}</li>
        </ul>

        <router-view></router-view>
    </div>
</template>

<script>
    export default {
        name: 'user',
        props: {

        },
        data() {
            return {

            }
        },
        computed: {
            user: function() {
                return this.$store.state.user
            }
        },
        methods: {

        }
    }
</script>

<template>
    <div class="user-quotes">
        <h2>User quotes</h2>
    </div>
</template>

<script>
    export default {
        name: 'userQuotes',
        props: {

        },
        data() {
            return {

            }
        },
        computed: {

        },
        methods: {

        }
    }
</script>