vue.js - vue-router嵌套子路由遇到的问

问题描述

问 题

需求是，我需要点击v-for循环出来的列表项，然后转跳到对应的UserDetail组件,我的路由这样写，没有出现转跳，哪里写错了没？
路由：

const router = new VueRouter({
  routes: [
    {
      path: '/user', 
      component: User,
      name: 'user',
      children: [
        { path: ':userId', component: UserDetail,name:'detail'},
      ]
    },
    {
      path: '/about', 
      component: About,
      name: about
    }
  ]
})

User.vue:

<template>
    <div v-for="(user,index) in users" @click="goDetails(index)">{{user.name}}</div>
    <router-view></router-view>
</template>
<script>
    export default {
        data(){
            return {
                users: [{name:'abby'},{name:'cici'},{name:'jane'}]
            }
        },
        methods:{
            goDetails(index){
                this.$router.push({
                    params: {userId: index}
                })
            }
        }
    }
<script>

UserDetail：

解决方案

goDetails(index){
    this.$router.push({
        name: "user",
        params: {userId: index}
    })
}

这篇关于vue.js - vue-router嵌套子路由遇到的问的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！