I'm new to vue.js and made this Landing ponent, which is linked to Login ponent. What I want to acheive is that when user clicks Login, the login page show up.
<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="+Icons" rel="stylesheet">
<link href=".97.6/css/materialize.css" rel="stylesheet">
</head>
<NavbarComp/>
<Landing/>
<FooterComp/>
</div>
</template>
<script>
import NavbarComp from './ponents/Navbar.vue';
import FooterComp from './ponents/Footer.vue';
import Landing from './ponents/Landing.vue';
import Login from './ponents/Login.vue';
import Register from './ponents/Register.vue';
export default {
name: 'app',
ponents: {
NavbarComp,
Landing,
FooterComp,
Login,
Register
}
}
</script>
routes.js:
import Login from './ponents/Login.vue';
import Register from './ponents/Register.vue';
import Landing from './ponents/Landing.vue';
export default [
{path: '/login', ponent: Login, name: 'Login'},
{path: '/register', ponent: Register, name: 'Register'},
{path: '/', ponent: 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 link in the URL bar changes but the ponent does not appear, and I don't see any error in the console. So don't know where to go from here.
How can I fix this?
I'm new to vue.js and made this Landing ponent, which is linked to Login ponent. What I want to acheive is that when user clicks Login, the login page show up.
<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./icon?family=Material+Icons" rel="stylesheet">
<link href="https://cdnjs.cloudflare./ajax/libs/materialize/0.97.6/css/materialize.css" rel="stylesheet">
</head>
<NavbarComp/>
<Landing/>
<FooterComp/>
</div>
</template>
<script>
import NavbarComp from './ponents/Navbar.vue';
import FooterComp from './ponents/Footer.vue';
import Landing from './ponents/Landing.vue';
import Login from './ponents/Login.vue';
import Register from './ponents/Register.vue';
export default {
name: 'app',
ponents: {
NavbarComp,
Landing,
FooterComp,
Login,
Register
}
}
</script>
routes.js:
import Login from './ponents/Login.vue';
import Register from './ponents/Register.vue';
import Landing from './ponents/Landing.vue';
export default [
{path: '/login', ponent: Login, name: 'Login'},
{path: '/register', ponent: Register, name: 'Register'},
{path: '/', ponent: 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 link in the URL bar changes but the ponent does not appear, and I don't see any error in the console. So don't know where to go from here.
How can I fix this?
Share Improve this question edited Sep 5, 2018 at 2:50 Karlom asked Sep 5, 2018 at 2:45 KarlomKarlom 14.9k29 gold badges78 silver badges118 bronze badges 10- No, I don't see any error. – Karlom Commented Sep 5, 2018 at 2:53
-
This is a long shot, but if that is exactly what your Login.vue contents are, you are missing a closing curly brace and have an extra ma at the end there. And a missing
</script>.. If the SFC isn't piling it might cause it to not show up. – Cᴏʀʏ Commented Sep 5, 2018 at 2:54 - Well, actually I stripped the ponents from irrelevant axiom code, so perhaps have missed a curly brace here and there, but I see no error, they should be fine. – Karlom Commented Sep 5, 2018 at 2:55
- Does your stripped down version work in your environment? I would strip it down as much as you can to see if you can get it working with just the bare minimum. – Cᴏʀʏ Commented Sep 5, 2018 at 2:57
-
1
Then you are looking at dynamic ponents here. Use
<ponent :is=ComponentName>vuejs/v2/guide/ponents.html#Dynamic-Components – Ru Chern Chong Commented Sep 5, 2018 at 3:32
1 Answer
Reset to default 8To elaborate on Cory's ment - which I believe to be the issue. You are missing <router-view>.
Your app currently appears to work because in App.Vue you are rendering the <Landing/> ponent. You should replace <Landing/> with <router-view/>. That way, when the route path is "/", the <router-view> will render the <Landing/> ponent in that space - much as it does now. When the route path is changed (by router-link) to "/Login", the Router will render the <Login/> ponent in that space instead.
Currently the Router is pointing to the correct Login ponent, however has nowhere to render it.
Read more here: https://router.vuejs/guide/#html