javascript - vue路由器显示空白页
问题描述
我目前正在为我的前端使用 vue.js 构建一个 Web 应用程序,在执行我的路由器期间我没有看到任何错误,但仍然没有在任何页面中显示任何内容,显然我已经确保一切都在运行并且没有错误,这就是我所拥有的:
App.vue
<template>
<div>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
Router.js
import Vue from 'vue'
import Router from 'vue-router'
import Home from './components/Home'
import Table from './components/Table'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
component: Home
},
{
path: '/table',
component: Table
},
],
linkActiveClass: "active",
mode: "hash"
})
main.js
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
作为一个例子Home.vue
<template>
<div class="flex flex-wrap -m-3">
<h1>You're looking at your home</h1>
</div>
</template>
<script>
export default {
name: 'Home',
data () {
return {}
}
};
</script>
任何提示或帮助将不胜感激。
解决方案
在您的沙盒代码中,您的答案中没有显示相同的代码,因此这就是看不到相同代码的原因,但一切正常。
如果您想在沙箱中查看表格页面,请将此li
标签添加到ul
沙箱主组件中的其中一个标签中:
<li>
<a
href="#/table"
>table</a>
</li>
或者
<router-link to="table">Go to Table</router-link>
在您的 Table.vue 组件中添加以返回
<router-link to="/">Go to Home</router-link>
推荐阅读
- excel - 如何从excel中读取数据并垂直连接列?
- reactjs - 如何使用侦听器重构此 React 组件以使组件正常工作?
- docker - 在 docker-compose 运行的容器中看不到 Dockerfile 集变量
- ios - 扩展 TableViewCells 以匹配其内容高度
- javascript - 如何在每次 Cogntio 用户池更改时触发 Lambda
- javascript - 自上一小时(或最后一天)以来,存储数据变化了 10%
- python - Plotly:如何使用 go.Bar 向堆积条形图添加数据标签?
- python-3.x - Python:有没有办法使用一定数量的输入?
- mysql - Mysql:Is null 不与其他语句一起使用
- windows - Microsoft Windows 中使用了哪些类型的磁盘调度算法?