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>

我想点击UserList中的链接可以导航到UserDetail，但它无法正常工作，有人帮忙检查一下吗？喜欢这个

应用

- 用户

----的UserList

http://localhost:8080/#/user

更改为

应用

- 用户

---- UserDetail

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

Answer 1

您必须在to中outer-link中的/user/:id作为<router-link :to="'/users/' + id">3434</router-link>在HTML代码中提供路径，如下所示：

li

请参阅工作小提琴here。

Answer 2

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

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

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

2 个答案: