vue-router4 页面跳转问题

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

请不要在回答技术问题时复制粘贴 AI 生成的内容

这是一个创建于 1298 天前的主题，其中的信息可能已经有所发展或是发生改变。

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>

5 条回复 2022-03-28 22:15:13 +08:00

yxcoder

2022-03-28 17:01:55 +08:00

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

或者

router.push('/page2')

能不能行

7911364440

2022-03-28 17:28:55 +08:00

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

sechi

2022-03-28 20:10:09 +08:00

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

rimworld

2022-03-28 22:05:35 +08:00

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

MissSixty

2022-03-28 22:15:13 +08:00

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