vue-router4 页面跳转问题

[7911364440]

router.push('xxx')的时候一直跳转到 / 路径，但是使用<router-link :to="toPage2()"></router-link>这种标签就可以正常跳转。

vue3 + vue-router4

• page1

<template>
  <h1>page1</h1>
  <button v-on:click="toPage2()">toPage2</button>
</template>

<script>
import {useRouter} from 'vue-router'

export default {
  name: "page1",
  setup () {
    const router = useRouter()
    const toPage2 = () => {
      router.push('page2')
    }
    return {
      toPage2
    }
  }
}
</script>

• page2

<template>
  <h2>page2</h2>
  <button v-on:click="toPage1()">toPage1</button>
</template>

<script>
import {useRouter} from "vue-router";

export default {
  name: "page2",
  setup () {
    const router = useRouter()
    const toPage1 = () => {
      router.push('page1')
    }
    return {
      toPage1
    }
  }
}
</script>

• router/index.js

import {createRouter, createWebHistory} from 'vue-router'

const routes = [
  {
    path: "/",
    redirect: 'page1'
  },
  {
    path: '/page1',
    name: 'page1',
    component: () => import('@/view/page1.vue')
  },
  {
    path: '/page2',
    name: 'page2',
    component: () => import('@/view/page2.vue')
  },
]

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

export default router

• main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

const app = createApp(App)
app.use(router)
app.mount('#app')

• App.vue

<template>
  <router-view/>
</template>

<script>

export default {
  name: 'App',
}
</script>

[yxcoder]

router.push({name: 'page2'})

或者

router.push('/page2')

能不能行

[7911364440]

@yxcoder 试过了，都不行，就总是跳转到 / 路径

[sechi]

我运行了一下你的代码，是可以正常使用的。建议你排查一下是不是系统、浏览器版本、vue 版本等问题

[rimworld]

把 path:/的配置 放到最后？

[MissSixty]

{
path: "/",
redirect: 'page1',
children:[
{
path: '',
name: 'page1',
component: () => import('@/view/page1.vue')
}
]
}
这两个不应该是父子的关系吗？