vue-router的没显示内容?? 为什么路径已经切换了, 但是组件内容没有显示, 也没报错, 单词书写也检查好几遍了
//router配置文件
import { createRouter, createWebHashHistory } from "vue-router";
import Home from "../Views/Home.vue"
import About from "../Views/About.vue"
// 创建一个路由
const router = createRouter({
// 指定采用的模式:hash
history: createWebHashHistory(),
// 映射关系
routes: [
{ path: '/home', component: Home },
{ path: '/about', component: About }
]
})
export default router
//App.vue
<template>
<div class="app">
<h2>app</h2>
<div class="nav">
<router-link to="/home">首页</router-link>
<router-link to="/about">关于</router-link>
</div>
<router-view></router-view>
</div>
</template>
<script setup>
</script>
<style>
</style>
//Home.vue
<template>
<div class="home">
<h2>home组件</h2>
</div>
</template>
<script setup>
</script>
<style>
</style>
//Abou.vue
<template>
<div class="about">
<h2>about组件</h2>
</div>
</template>
<script setup>
</script>
<style>
</style>
方便远程看看吗
main.js 中 vue.use 路由没有
不知道你这个问题是否已经解决, 如果还没有解决的话:在路由改变时，router-view渲染显示路由对应的内容。
render函数、Babel 插件用于在 Vue 中使用 JSX 语法
render (_, { props, children, parent, data }) {
const h = parent.$createElement
const route = parent.$route
const matched = route.matched[depth]
const component = matched && matched.components[name]
return h(component, data, children)
}
根据你提供的问题和参考资料，你在使用vue-router时遇到了中的内容没有显示出来的问题。这可能是以下几个原因导致的：
路由配置错误：首先，你需要确认路由配置中的component是否正确，并且已经按照正确的格式加上了name属性以区分多个。确保路径对应的组件已经被正确导入，并且component属性值是一个函数，通过import动态导入组件。
放置错误：第二，你需要确保标签放置的位置正确。根据参考资料中的示例代码，在App.vue组件中放置了一级路由对应的，而二级路由对应的放在了父路由对应的组件内部。请确认你的项目结构是否和示例代码类似。
路由参数问题：如果你的路由配置中存在参数传递的情况，需要确认参数传递的方式是否正确。根据参考资料的说明，可以使用query和path组合的方式传递参数，在中使用:to属性指定参数的格式和值。
如果以上解决方案都不起作用，请提供更多的代码和详细的问题描述。