vue中点击跳转，url一直有变化，但是页面只能跳转一次，再怎么点击都只有url在变化，页面不在变化了，涉及技术有typescript iview vue，求指点谢谢

1.这是router.ts

{
  path: '/login',
  name: 'login',
  component: () => import('./views/Login.vue'),
},
{
  path: '/home',
  name: 'home',
  component: () => import('./views/Home.vue'),
},
{
  path: '/backend',
  name: 'layout',
  component: () => import('./views/layout.vue'),
  children: [
    {
      path: '/backend/addGame',
      name: 'addGame',
      component: () => import('./views/chessGame/gameManage/addGame.vue'),
    },
    {
      path: '/backend/gameInfo',
      name: 'gameInfo',
      component: () => import('./views/chessGame/gameManage/gameInfo.vue'),
    },
  ],
},

2.这是layout.vue 就是把组件拼在一起的父模板

<template>
    <div>
        <topNav></topNav>
        <menuNav></menuNav>
        <leftNav></leftNav>
        <urlNav></urlNav>
        <router-view id='routerView'/>
    </div>
</template>

<script lang="ts">
    import { Component, Vue } from 'vue-property-decorator';
    import topNav from '@/components/topNav.vue';
    import menuNav from '@/components/menuNav.vue';
    import leftNav from '@/components/leftNav.vue';
    import urlNav from '@/components/urlNav.vue';

    @Component({
        components: {
            topNav,
            menuNav,
            leftNav,
            urlNav,
        },
    })

    export default class Home extends Vue {}
</script>

3.这是根节点 app.vue

<template>
  <div id="app">
    <transition
      enter-active-class="animated fadeIn"
      leave-active-class="animated fadeOut"
      mode="out-in"
    >
      <router-view/>
    </transition>
  </div>
</template>

4.这是部分的跳转页面代码，是layout中子组件的一部分

<Menu :open-names="['1']" @on-select="clickLeft">
    <Submenu name="1">
       <template slot="title"><Icon type="ios-game-controller-b" />游戏管理</template>
       <MenuItem name="添加游戏" :to="{name: 'addGame'}">添加游戏</MenuItem>
       <MenuItem name="游戏信息" :to="{name: 'gameInfo'}">游戏信息</MenuItem>
     </Submenu>
</Menu>