Route does not work in Vue.js - Go to ' / ' instead of ' ' /login '

Question

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>

Answer 1

You need to create a router-view on its home page, in the case of the App, that will direct to Content when / and to Login when /login.

Example:

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!-- use router-link component for navigation. -->
    <!-- specify the link by passing the `to` prop. -->
    <!-- `<router-link>` will be rendered as an `<a>` tag by default -->
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
  <!-- route outlet -->
  <!-- component matched by the route will render here -->
  <router-view></router-view>
</div>

Example taken from https://router.vuejs.org/guide/#html