Vue-router 页面跳转无应答

Question

vue-router跳转的过程中页面无法跳转。我的代码如下：

routrt里的index.js
import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)
const Loading = resolve => require(['../Views/Loading'],resolve)
const Layout = resolve => require(['../Views/Layout'],resolve)
const Demo = resolve => require(['../Views/Demo01'],resolve)
const Infromation = resolve => require(['../Views/Infromation'],resolve)
const Like = resolve => require(['../Views/Like'],resolve)
const Skill = resolve => require(['../Views/Skill'],resolve)

const router = new Router({
routes: [

{
  path: '/Loading',
  name: 'Loading',
  meta:{
    requireAuth: false
  },
  component: Loading
},
{
  path: '/',
  name:'Layout',
  meta: {
      requireAuth: true
  },
  component: Layout,
  redirect: '/Layout', // 这里重定向到登录页面
  children:[{
    path:'/Infromation',
    mata:{
      requireAuth: true
    },
    component: Infromation
  },{
    path:'/Like',
    meta:{
      requireAuth: true
    },
    component:true
  },{
    path:'/Skill',
    meta:{
      requireAuth:true
    },
    component:Skill
  }]
}

]
})

export default router

Loading代码
<template>

<div id="demo">

<button value="goIndex" @click="goIndex">goIndex</button>

</div>

</template>
<script>
import Vue from 'vue'
export default {
name: "Loading",

    data() {
                    return {
                            username:''
                    }

},
methods:{

            goIndex:function (){
      this.$router.push("/")
                    
                    return {
                            username:'1'
                    }
                    }
        }

}
</script>
Layout页面
<template>

<div>hellow world</div>

</template>

<style>

div{font-size: 30px;}

</style>
请问这是哪里出了问题，应该怎么修改？

Answer 1

这里的路由不是这样写吧

goIndex:function (){
      this.$router.push({
          path: '/'
      })
}