Question

我目前正在使用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>

任何提示或帮助将不胜感激。

Answer 1

在您的沙盒代码中，您没有答案中显示的相同代码，因此这就是为什么看不到相同代码的原因，但是一切正常。

如果要在沙盒中查看表格页面，请在沙盒主组件的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>

Vue路由器显示空白页

1 个答案: