javascript - 当我使用 vue-router 时,我的组件的内容没有显示出来
问题描述
我是 vue 的新手。对不起,如果这是一个愚蠢的问题。我正在使用 vue-router 路由到组件。单击路由器链接时,我的 url 正在更改,但未显示组件的内容。我在开发人员工具中没有收到任何错误。如果你能提供帮助,那将是一个巨大的帮助。
我在这里尝试了有关此问题的所有答案,但仍然无法正常工作。
src/App.vue
<template>
<div id="app">
<router-link to="/toread">Go toread</router-link>
<router-view></router-view>
</div>
</template>
<script>
import toread from './components/toread.vue';
export default {
name: 'app',
components:{
toread
},
}
</script>
src/components/toread.vue
<template>
<div>
<h1>toread</h1>
</div>
</template>
<script>
export default {
}
</script>
<style scoped>
</style>
src/main.js
import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import Routes from './routes'
import toread from './components/toread.vue'
Vue.use(VueRouter)
const router = new VueRouter({
Routes
});
new Vue({
el: '#app',
render: h => h(App),
router
})
src/routes.js
import toread from './components/toread.vue'
export default[
{path:'/toread', component:toread},
]
我希望单击路由器链接并显示来自 toread 组件的 h1 标签。
解决方案
更改Routes
为routes: Routes
const router = new VueRouter({
routes: Routes
});
推荐阅读
- python - 从左侧或右侧用非零值填充一维 NumPy 数组的零值?
- sql - BigQuery 计算多列值之间的重叠百分比
- python - 有没有办法替换字符串中的重复单词但仅在特定位置?
- python - 什么版本的python 3与tkinter兼容
- algorithm - 是否实现了 n 维 alpha 形状算法?还是n维凹壳算法?
- reactjs - 我应该使用 SSR 吗?
- c - C 中的 regex_search() 等效项
- python - 如何在 2 个虚拟机上运行 2 个 python 服务器/客户端应用程序,以便它们可以相互通信(发送消息)?
- java - 使用任意数量的类
- c# - 结构布局和字体大小?