时间戳

首页 > 解决方案 > 路由器未显示Vue组件

javascript - 路由器未显示Vue组件

问题描述

我是VueJs的新手。我正在尝试使用VueJs开发主题，我遇到了路由器问题，“组件未显示”。这是我的代码

页面.vue

<template>
    <div>
        <h1>Hello This is a test</h1>
    </div>
</template>

<script>
export default {
    name : "Pagea"
}
</script>

应用程序.vue

<template>
  <div id="app">   

    <router-link to="/">Go to Foo</router-link>
    <router-link to="/Pagea">Go to Bar</router-link>

    <router-view></router-view>

  </div>
</template>

<script>

export default {
  name: 'app',
  components: {
    Header,
    Footer
  }
}
</script>

main.js

import Vue from 'vue';
import App from './App.vue';
import VueRouter from 'vue-router';

import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap-vue/dist/bootstrap-vue.css';


Vue.use(BootstrapVue);
Vue.use(VueRouter);

Vue.config.productionTip = false;

//Router
import Pagea from './components/Pagea.vue';

const routers = [
  { 
    path: '/pagea',
    name : 'Pagea',
    component : Pagea     
  }
];

const router = new VueRouter({
  routers,
  mode : 'history'
});

new Vue({
  router,
  render: h => h(App)  
}).$mount('#app')

没有控制台错误，但仍有结果。我不知道为什么组件或数据不只显示空白页面。请任何人都可以告诉我我错过了什么。作为我早期的豪宅，我是新的，还在学习。谢谢你。

标签： javascriptvue.js

解决方案

更确定的是，问题在于您的：

<router-link to="/Pagea">Go to Bar</router-link>

应该：

<router-link to="/pagea">Go to Bar</router-link>

由于您在路由器中声明了它：

{ 
    path: '/pagea', /* lower-case here */
    name : 'Pagea',
    component : Pagea     
  }

..................................................... ..................................................... .

但是，如果这不能解决问题，请尝试以下操作：

尝试以下方法，让我知道它是否对您有用。

Pagea.vue，删除导出并将 className 设置为 div 标签：

<template>
    <div class="pagea">
        <h1>Hello This is a test</h1>
    </div>
</template>

保持你的 vue 文件尽可能的简洁。不要去那里混合东西。

从您的 App.vue 中删除导出并确保您的 to 匹配区分大小写。在这种情况下，当您的路线设置为“/pagea”时，您表示要转到“/Pagea”

<template>
  <div id="app">   
    <router-link to="/">Go to Foo</router-link>
    <router-link to="/pagea">Go to Bar</router-link>

    <router-view></router-view>

  </div>
</template>

将你的路由器代码移动到它自己的 JS 文件中：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Pagea from './components/Pagea.vue';

let routes = [
  {
    path: '/pagea',
    name : 'pagea', /* Keep the name lowercase as in the className */
    component: Pagea  
  }
];

export default new Router({
 routes: ...
}

与一个文件中的所有内容相比，它将使您的代码更清晰、更易于维护。

然后你可以在你的 main.js 中调用你的 router.js

import router from './router'

new Vue({
  router,         
  render: h => h(App)
}).$mount('#app')

推荐阅读