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>
重新刷新浏览器，就发现页面已经可以进行跳转了。
登录
请登录后再发表评论。
评论列表:
目前还没有人发表评论