Question

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

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

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

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

./ SRC /路由器/ 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 /元件库/ 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 /元件库/ UserQuotes.vue

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

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

        },
        data() {
            return {

            }
        },
        computed: {

        },
        methods: {

        }
    }
</script>

Answer 1

我真的没有看到base: __dirname的需要，但也许我错过了一些东西。

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

Vue嵌套路由问题与渲染子组件

1 个答案: