Question

我正在尝试使用：to将按钮引用到另一页。目前没有任何作用。为了进行测试，我现在尝试引用现有的/ learn页面。

我的代码：

  <b-navbar-item tag="div">
                <div class="buttons">
                    <a class="button is-primary"
                v-for="item in menuItems" 
                :key="item.title"
                :to="item.link">
                        {{item.title}}
                        </a>    
                </div>
            </b-navbar-item>

export default {
    data() {
      return {
           menuItems: [
       { title: 'Login', link: '/learn'},
       { title: 'Sign up', link: '/learn'},
       { title: 'Logout', link: '/learn'},

      ]
      }

Answer 1

您是否正在使用Vue Router？我不是Vue.js专家，但是我相信v-bind:to组件上使用了<router-link>属性。对于使用<a>标签的常规链接，可以使用v-bind:href或:href来分配链接：

new Vue({
  el: '#app',
  data: {
    menuItems: [{
        title: 'Login',
        link: '/link1'
      },
      {
        title: 'Sign up',
        link: '/link2'
      },
      {
        title: 'Logout',
        link: '/link3'
      },
    ]
  }
})

<script src="https://unpkg.com/vue"></script>
<div id="app">
  <div class="buttons">
    <a class="button is-primary" v-for="item in menuItems" :key="item.title" :href="item.link">
      {{item.title}}
    </a> 
  </div>
</div>

Answer 2

要执行此操作，您需要使用VueRouter，而不是<a>标签，而需要使用<router-link>组件。如果您确实需要使用<a>标签，也可以使用<router-link>的{{3}}

<router-link
  to="/foo"
  v-slot="{ href, route, navigate, isActive, isExactActive }"
>
  <li
    :class="[isActive && 'router-link-active', isExactActive && 'router-link-exact-active']"
  >
    <a :href="href" @click="navigate">{{ route.fullPath }}</a>
  </li>
</router-link>

按钮点击问题

2 个答案: