Изменить IMG SRC в зависимости от маршрута - PullRequest
Новая
       6

Изменить IMG SRC в зависимости от маршрута

0 голосов
/ 23 февраля 2019

У меня есть компонент заголовка с изображением логотипа слева, например, так: 

<router-link to="/">
    <img id="top-logo" src="@/assets/images/logo/logo-ft-on-tp.svg">
</router-link>

Теперь я хочу, чтобы этот логотип появлялся только на домашней странице, и загружал другое изображение на все остальныестраницы.Как я могу добиться этого в VueJS?

1 Ответ

0 голосов
/ 23 февраля 2019

Вы можете проверить свой текущий путь с помощью this.$router.path: 

const Home = {
  template: '<div>Home</div>'
}
const Foo = {
  template: '<div>Foo</div>'
}

const router = new VueRouter({
  mode: 'history',
  routes: [{
      path: '/',
      component: Home
    },
    {
      path: '/foo',
      component: Foo
    }
  ]
})

new Vue({
  router,
  el: '#app',
  computed: {
    checkIfHome() {
      return (this.$route.path === '/') ? true : false
    }
  }
})
<script src="https://npmcdn.com/vue/dist/vue.js"></script>
<script src="https://npmcdn.com/vue-router/dist/vue-router.js"></script>

<div id="app">
  <div v-if="checkIfHome">home image</div>
  <div v-else>other image</div>

  <router-link to="/">/home</router-link>
  <router-link to="/foo">/foo</router-link>

  <router-view></router-view>
</div>

Проверьте работоспособность скрипта

...