嵌套路由在 vue-router 2 中不起作用

Question

这里是代码。

html

<div id="app">
    <nav>
        <ul>
            <router-link to="/user">User List</router-link>
        </ul>
    </nav>
    <router-view></router-view>
</div>

路由定义

const routes = [
{
    path: '/user', component: User,
    children: [
        {path: '', name:'user-list', component: UserList},
        {path: ':id', name: 'user-detail', component: UserDetail}
    ]
}];
let router = new VueRouter({routes});
export default router;

用户

<template>
<div>
    <h2>User Center</h2>
    <router-view></router-view>
</div>
</template>

<script>
export default {
    data () {
        return {

        }
    },
    methods:{
    }
}
</script>

用户列表

<template>
<div>
    <!--<ul>-->
        <!--<li v-for="u of userList">-->
            <!--<router-link :to="{ name:'user-detail', params: { id: '4343' }}">{{u.name}}</router-link>-->
        <!--</li>-->
    <!--</ul>-->
    <router-link :to="{ name:'user-detail', params: { id: '4343' }}">3434</router-link>
    <!--<a @click="query">++++</a>-->
</div>
</template>

<script>
import {mapActions} from 'vuex'
import {USER_QUERY} from '../store/user.type'


export default {
    data () {
        return {
            userList: []
        }
    },
    methods: {
        query: function () {
            this.$store.dispatch(USER_QUERY, [{name:'111'},{name:'1222'}])
        }
    }
}
</script>

用户详情

<template>
<div>
    <h2>{{ $route.params.id }}</h2>
</div>
</template>

<script>
export default {
    data () {
        return {
        }
    },
    methods: {
        test: ()=> {

        }
    }
}
</script>

我想点击用户列表中的链接可以导航到用户详细信息，但它不起作用，有人帮忙检查一下吗？ 像这样

应用程序

--用户

----用户列表

http://localhost:8080/#/user

改成

应用程序

--用户

----用户详情

http://localhost:8080/#/user/5454

Answer 1

您必须在您的 HTML 代码中将to 中的outer-link 中的路径作为/user/:id 提供，如下所示：

  <router-link :to="'/users/' + id">3434</router-link>

见工作小提琴here。

Answer 2

我犯了这样一个愚蠢的错误。

import User from './component/user-list.vue';