Vue.js根据当前页面url动态绑定标签属性值

需求描述

导航栏在不同的页面显示不同的标签用于跳转。

涉及到两个页面的跳转，在产品介绍页的时候需要显示 登录，并且链接到登录页；在登录页显示 首页，并链接到首页。

页面效果

产品介绍页 /intro：

登录页 /login：

环境

• vue 2.5.2
• Element

代码

Navbar_home.vue：

使用 <router-link> 组件，其中 to 属性为目标地址， 即要显示的内容。

<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 获取当前页面url，如：/login。