vue.js 路由器链路不加载组件

我是vue的新手.js并制作了这个Landing组件，该组件链接到Login组件。我想要实现的是，当用户单击登录时，将显示登录页面。

<template>
<div>
<div class="landing">
<router-link to="/login">Login</router-link>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'Landing',
data: function () {
return {
}
},
methods:  {
}
}
</script>

主要.js：

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import Materials from "vue-materials"
import Routes from './routes'
const router = new VueRouter({
routes: Routes,
mode: 'history'
});

Vue.use(Materials)
Vue.use(VueRouter);
Vue.config.productionTip = false
new Vue({
router: router,
render: h => h(App)
}).$mount('#app')

App.Vue ：

<template>
<div id="app">
<head>
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.css" rel="stylesheet">
</head>
<NavbarComp/>        
<Landing/>
<FooterComp/>
</div>
</template>
<script>
import NavbarComp from './components/Navbar.vue';
import FooterComp from './components/Footer.vue';
import Landing from './components/Landing.vue';
import Login from './components/Login.vue';
import Register from './components/Register.vue';
export default {
name: 'app',
components: {
NavbarComp,
Landing,
FooterComp,
Login,
Register
}
}
</script>

路线.js：

import Login from './components/Login.vue'; 
import Register from './components/Register.vue'; 
import Landing from './components/Landing.vue'; 
export default [
{path: '/login', component: Login, name: 'Login'},
{path: '/register', component: Register, name: 'Register'},
{path: '/', component: Landing, name: 'landing'},
]

最后，Login.vue：

<template>  
<div>
<h2>Login</h2>    
</div>
</template>
<script>
import axios from 'axios';
export default {
name: 'Login',
data: function () {
return {
ok: true,
showErrorRegister: false,
showErrorLogin: false,
username: "",
password: "",
email: "",
error: "",            
}   
},

当我单击登录链接时，URL 栏中的链接会更改，但组件没有出现，并且在控制台中看不到任何错误。所以不知道从这里去哪里。

我该如何解决这个问题？

详细说明科里的评论 - 我认为这是问题所在。你错过了<router-view>.

您的应用程序当前似乎可以工作，因为在 App.Vue 中，您正在渲染<Landing/>组件。您应该将<Landing/>替换为<router-view/>。这样，当路由路径为"/"时，<router-view>将在该空间中呈现<Landing/>组件 - 就像现在一样。当路由路径(通过路由器链接(更改为"/Login"时，路由器将在该空间中呈现<Login/>组件。

当前路由器指向正确的登录管理器组件，但无处渲染它。

在此处阅读更多内容： https://router.vuejs.org/guide/#html

相关内容

最新更新

热门标签：