渲染子组件的Vue嵌套路由问题答案

【问题标题】：Vue nested routes issue with rendering child component渲染子组件的Vue嵌套路由问题
【发布时间】：2018-11-17 04:21:54
【问题描述】：

我在使用 vue-router 嵌套路由时遇到问题。

https://router.vuejs.org/guide/essentials/nested-routes.html

我有父路由User 和子路由UserQuotes，它们没有渲染。控制台中没有错误或警告。 Vue devtools 根本没有显示 UserQuotes。

网址： http://localhost:8080/user/lagin/quotes

./src/router/index.js

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

./src/compoments/User.vue

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

./src/compoments/UserQuotes.vue

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

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

        },
        data() {
            return {

            }
        },
        computed: {

        },
        methods: {

        }
    }
</script>

【问题讨论】：

你有没有发现我遇到了同样的问题

标签： javascript vue.js vue-component vue-router vuex

【解决方案1】：

我真的不认为需要base: __dirname，但也许我错过了一些东西。

尝试将此参数添加到我的一个具有嵌套路由的项目中，这以您描述的类似方式破坏了应用程序。尝试完全删除它，看看是否能解决您的问题。

【讨论】：