技術標籤：SpringBoot前端-Vuevuejava

需求描述

導航欄在不同的頁面顯示不同的標籤用於跳轉。

涉及到兩個頁面的跳轉，在產品介紹頁的時候需要顯示 登入，並且連結到登入頁；在登入頁顯示 首頁，並連結到首頁。

頁面效果

產品介紹頁 /intro：

登入頁 /login：

環境

• vue 2.5.2
• Element

程式碼

Navbar_home.vue：

使用 router-link 標籤，其中 to 屬性為要跳轉的 path。

<router-link class="inlineBlock" :to="toAddress">
    {{ toCaption }}
</router-link>
 

上面的 :to="toAddress" 是 v-bind:to="toAddress" 的簡寫，用於動態繫結標籤的屬性值。

在 data() 中獲得變數：

export default {
  data() {
    return {
      toAddress: this.$route.path === '/login' ? '/intro' : '/login',
      toCaption: this.$route.path === '/login' ? '首頁' : '登入'
    }
  },
  ...
}

this.$route.path