根据路由更改img src

Question

我有一个 header 组件，左边有一个徽标图像，就像这样—

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

现在，我希望这个徽标只出现在主页上，并在所有其他页面上加载不同的图像。我如何在 VueJS 中实现这一点？

Answer 1

您可以使用 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

根据路由更改img src

Change img src based on route

vue.js

vue-router