-3
Good night, you guys!
I’m starting to learn and am creating my first project with Vue.js.
It happens that I created a route '/login' but the component that loads is the 'Content' that is at the root of the application. I’m looking at the code and I can’t find the problem. Could someone help me?
If I place localhost:3001 or localhost:3001/login the exact same thing appears in the browser.
Login component:
<template>
<div class='login'>
<h1>Página de Login!!!</h1>
<h1>Página de Login!!!</h1>
<h1>Página de Login!!!</h1>
</div>
</template>
<script>
export default {
name: 'Login',
}
</script>
<style>
.login {
color: black;
}
</style>
Route archive:
import Vue from 'vue'
import VueRouter from 'vue-router'
import Content from '@/components/template/Content'
import Login from '@/components/account/Login'
Vue.use(VueRouter)
const routes = [{
name: 'content',
path: '/',
component: Content
}, {
name: 'login',
path: '/login',
component: Login
}]
export default new VueRouter({
mode: 'history',
routes: routes
})
App file.Vue:
<template>
<div id="app">
<Content />
</div>
</template>
<script>
import Content from './components/template/Content'
export default {
name: 'App',
components: { Content }
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>