Vue, Styling

How do I style only the text that appears in my router link in a Vue application? I have:

<template>
  <div id="app" class="router container-fluid">
      <div class="navigation">
      <router-link to="/">foo</router-link>|
      <router-link to="/bar">bar</router-link>|
      <router-link to="/foo2">foo2</router-link>|
      <router-link to="/bar2">bar2</router-link>|
      <Button @click="logout()" v-if="this.$store.state.userIsAuthorized">Log Out</Button>
      <router-view />
      </div>
  </div>
</template>

But if I try to style the links like this:

<style>
body {
  background-image: url("./assets/background.png");
  background-repeat: no-repeat;
  background-size: auto;
}
.navigation{
  background-color: red;
}
</style>

Every page of the app will then have a red background. I can not scope the style as I have a picture I want as a background on all pages (as shown). What I want is for the area around the links to be a different colour, the entire navigation to be centred and the navigation links to be a different colour.

Any help? Thanks