I am a beginner with vue.js and I have created a Landing component that is connected to the Login component. My goal is to make it so that when the user clicks on Login, the login page displays.
<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>
The main.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>
routes.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'},
]
And finally, 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: "",
}
},
When I click on Login link, the URL changes but the component does not display, and there are no errors in the console. I'm not sure what to do next.
What steps can I take to resolve this issue?