主页

vue3 如果你的路由文件没有问题，但是在页面点击跳转页面一直无法进行跳转，一直停留在原页面，但是路由已经进行了改变

2023-11-14 07:53PM

请确保你的路由文件和其他文件没有问题。其实最主要是因为 App.vue 文件编写有问题

我的路由文件内容如下：

import { createRouter, createWebHistory } from 'vue-router';
import ZhuiFeng from '@/components/ZhuiFeng.vue';
import Home from '@/components/Home.vue';

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/zhuiFeng',
    name: 'ZhuiFeng',
    component: ZhuiFeng
  }
];

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

export default router;

我最初的 App.vue 是这样编写的：

<template>
  <div>
    <backgroundComponent />
    <router-view />
  </div>
</template>

<script>
import backgroundComponent from '@/components/Home.vue'
export default {
  name: 'App',
  components: {
    backgroundComponent
  }
}
</script>

<style>
</style>

这样编写是有问题的，它会导致你点击链接跳转页面缺一直无法进行跳转，但是路由已经进行了改变

把 App.vue 文件修改为：

<template>
  <div>
    <main>
      <router-view></router-view>
    </main>
  </div>
</template>

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

<style>
</style>

重新刷新浏览器，就发现页面已经可以进行跳转了。

返回>>

登录

请登录后再发表评论。

评论列表:

目前还没有人发表评论