I encountered the following error message:
[Vue warn]: Unknown custom element: <router-view> - did you register the component correctly? For recursive components, make sure to provide the "name" option.I double-checked that the Vue router is installed correctly.
routes.js
import Login from './views/Login.vue';
import Home from './views/Home.vue';
import Vue from 'vue';
import Router from 'vue-router';
Vue.use(Router);
export default new Router({
routes:[
{
path:'/',
name:'home',
component:Home
},
{
path:'/login',
name:'Login',
component:Login
}
]
});
App.vue
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<router-view/>
</div>
</template>
<script>
export default {
name: 'App',
}
</script>
<style >
</style>
Login.vue
<template>
<div class='login'>
<h3>Sign in</h3>
<input type="text" placeholder="Email"><br>
<input type="password" placeholder="Password"><br>
<button>Connection</button>
<p>You don't have an account? Sign up</p>
</div>
</template>
<script>
export default {
name: 'login',
data(){
return {};
},
methods:{}
}
</script>
<style scoped>
.login{
margin-top:40px;
}
input{
margin:10px 0;
}
button{
margin-top:20px;
width:10%;
cursor:pointer;
}
p{
margin-top:40px;
font-size: 13px;
}
p a {
text-decoration:underline;
cursor: pointer;
}
</style>