Vue3 中使用 `vue-router` 只能跳转到主页面？

Question

目录树如下，主体由 Vue3 的 client 使用 vue create xxx 和 npm install vue-router 两个指令生成。

src
├─assets
├─components
│  ├─viewCard.vue
│  ├─detailsView.vue
│  └─(others)
├─router
│  └─index.js
├─App.vue
└─main.js

router/index.js 中定义路由：

import { createRouter, createWebHistory } from "vue-router";
import App from '../App.vue';
import detailsView from '../components/detailsView.vue';

const routes = [
    {path: '/', name: 'home', component: App},
    {path: '/details', name: 'details', component: detailsView},
];

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

main.js 引入路由：

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

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

App.vue 中的一个组件 viewCard.vue 定义点击事件触发路由，并在新界面中打开对应组件：

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

const props = defineProps(['cardItem', 'cardIndex']);
const router = useRouter();

function openDetailsPage() {
    var url = router.resolve({path: '/details'});
    window.open(url.href);
}
</script>

<template>
    <div class="view-card" @click="openDetailsPage">

    </div>
</template>

<style scoped>

</style>

点击 view-card 后，打开了新界面，导航栏也从 http://localhost:8080 跳转到 http://localhost:8080/details ，界面本应该跳转到 detailsView.vue 了，但是此时显示的还是 App 对应界面。

如果把这两句：

    var url = router.resolve({path: '/details'});
    window.open(url.href);

改成 router.push 方法，点击后界面没有反应。

以上都没有出现浏览器报错。

Answer 1

引自强大而免费的微信小程序：皆我百晓生。

在Vue3中使用vue-router进行页面跳转时，你需要通过router.push方法来进行跳转，而不是使用window.open方法。你可以将以下代码覆盖viewCard.vue中的openDetailsPage函数：

function openDetailsPage() {
  router.push({ name: 'details' });
}

这样就可以正确地跳转到detailsView.vue页面了。请确保在router/index.js中正确定义了details路由，即：

const routes = [
  {path: '/', name: 'home', component: App},
  {path: '/details', name: 'details', component: detailsView},
];