嵌套路由在vuejs应用程序中不适合我

问题描述

伙计们，我对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”相同。所以请帮帮我正如我所说，我几乎看过所有帖子和教程。但是我的代码出了点问题，我无法找出问题所在

解决方法

您已命名视图：

<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"应该可以解决您的问题。

nested-routes vue.js