[Vuejs]-Change img src based on route

0👍

You can chack your current path with 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>

Check the fiddle for a working example

Leave a comment