Nested routing not working for me in vuejs application

Question

Hey Guys I'm pretty new to vue.js. And I want to make routing with sub routes. I read almost every post but can't do it. Something's wrong in my Code. So please help me if you can. Here is my codes an templates.

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" is same as "/main". so please help me. As I said I have seen almost every post and tutorial. But somethings wrong with my code and I cant'f figure out what is the problem

score 0 · Answer 1 · answered Aug 15 '20 at 16:25

You have named your view:

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

and are trying to render game with that router-view, and first of all, the names do not match. Named views should be set up like this, where in sample there are named views a and b:

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

I think you are not looking for named views in this case (?), so removing name="rout" from your router view should solve your issue.

Nested routing not working for me in vuejs application

1 Answers1