vue3中router.push无法跳转

Question

在vue3中使用router.push无法跳转的问题,路由定义如下:

const publicRoutes = [
  {
    path: '/login',
    component: () => import('@/views/login/index')
  },
  {
    path: '/',
    component: () => import('@/views/layout/index')
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes: publicRoutes
})

export default router

在一个login组件中,登录成功之后,进行路由跳转,但是router.push没有任何反应,代码如下:

<script setup>

import { useRouter } from 'vue-router'
// 数据源
const loginForm = ref({
  username: 'admin',
  password: '1234qwer'
})

// 路由
const router = useRouter()

// 登录动作处理
const loading = ref(false)
const loginFormRef = ref(null)
const store = useStore()
const handleLogin = () => {
  loginFormRef.value.validate((valid) => {
    if (!valid) return

    loading.value = true
    store
      .dispatch('user/login', loginForm.value)
      .then(() => {
        loading.value = false
        console.log(router, 'haha')  // 这里是可以打印出结果,也可以打印出router的信息,但是下面的push就是无法跳转
        router.push('/')
        
      })
      .catch((err) => {
        console.log(err)
        loading.value = false
      })
  })
}
</script>

如果在router.push()随便写一个不存在的路由,会报错没有找到对应的路由,也就是这里的router.push匹配到了路由,但是为啥没有跳转呢?
版本信息如下:

    "vue": "^3.2.8",
    "vue-router": "^4.0.11",
    "vuex": "^4.0.2"

Answer 1

第一处错误

const publicRoutes = [
  {
    path: '/login',
    name: '/login',
    component: () => import('@/views/login/index')
  },
  {
    path: '/',
    name: 'home',
    component: () => import('@/views/layout/index')
  }
]

第二处错误

router.push({path:'/'}) // 这是传一个对象  path 或者name  但是path要全路径  router.push({name:'home'})