嵌套路由在 vuejs 应用程序中对我不起作用答案

【问题标题】：Nested routing not working for me in vuejs application嵌套路由在 vuejs 应用程序中对我不起作用
【发布时间】：2020-08-15 13:56:48
【问题描述】：

大家好，我是 vue.js 的新手。我想用子路由进行路由。我几乎阅读了所有帖子，但做不到。我的代码有问题。所以，如果可以的话，请帮助我。这是我的代码和模板。

Router.js

import Vue from 'vue'
import Router from 'vue-router'
import Game from '../components/game/Game.vue'
import Home from '../views/Home.vue'
import Login from '../views/Login.vue'
import Main from '../views/Main.vue'

Vue.use(Router)

const routes = [
  // {
  //   path: '/game',
  //   name: 'Game',
  //   component: Game,
  //   props: true
  // },
  {
    path: '/main',
    component: Main,
    props: true,
    children: [
      {
        path: 'game',
        name: 'game',
        component: Game,
        props: true
      },
      {
        path: '',
        name: 'home',
        component: Home,
        props: true
      }
    ]
  },
  {
    path: '/login',
    name: 'login',
    component: Login,
    props: true
  }
]

const router = new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

App.vue

<template>

  <div id="app">

    <router-view></router-view>

  </div>

</template>

Main.vue

<template>
  <div class="wrapper">
    <Loader v-if="!userData.name"/>
    <Header :showUserInfoHandler="showUserInfoHandler" :userData="userData" :homeIsActive="isHomeActive"/>
    <section class="gamePage" ref="resizeArea">
      <div class="leftSide" ref="leftSide">
        <div class="topSide" ref="topSide">
          <router-view :width="gameTableWidth" :height="gameTableHeight" :homeActiveHandler="homeActiveHandler" name="rout"></router-view>
        </div>
        <div id="resizerY" ref="resizerY" @mousedown="dragMouseDown($event, false)"></div>
        <div class="bottomSide" ref="bottomSide">
          <Messages v-if="showMessages" />
        </div>
      </div>
      <div id="resizerX" ref="resizerX" @mousedown="dragMouseDown($event, true)"></div>
      <div class="rightSide" ref="rightSide">
        <SideBar class="sidebar"/>
      </div>
    </section>
    <UserDetails
      v-if="showUserInfo"
      :userData="userData"
      :closeUserDet="closeUserDet"
      :positions="userDetPositions"
    />
  </div>
</template>

“/main/game”与“/main”相同。所以请帮助我。正如我所说，我几乎看过每一篇文章和教程。但是我的代码有问题，我无法弄清楚是什么问题

【问题讨论】：

标签： vue.js nested-routes

【解决方案1】：

您已为视图命名：

<router-view ... name="rout"></router-view>

并尝试使用该路由器视图呈现game，首先，名称不匹配。命名视图应设置为this，其中示例中有命名视图a 和b：

const router = new VueRouter({
  routes: [
    {
      path: '/',
      components: {
        default: Foo,
        a: Bar,
        b: Baz
      }
    }
  ]
})

我认为在这种情况下您不是在寻找命名视图 (?)，因此从路由器视图中删除 name="rout" 应该可以解决您的问题。

【讨论】：