如何使用路由器链接自定义导航而不是`to`道具答案

【问题标题】：how to use router-link custom navigation instead of `to` prop如何使用路由器链接自定义导航而不是`to`道具
【发布时间】：2020-05-18 15:01:11
【问题描述】：

<router-link to="/"  tag="a" :title="title">
            <span class="icon icon-home i-large" />
            <span class="class-2">Name</span>
        </router-link>

这就是我所拥有的……

如您所见，我正在使用to 道具。但我不想使用它。每当有人点击它时，我想执行一个功能并使用程序导航。

这怎么可能？我拥有的结构和 html 不应更改，它仍应按预期工作。

【问题讨论】：

我认为如果你这样写的话你可以内联：:to="myFuncRetVal" 并添加@click="myFunc"，只要你的函数返回一个字符串。
to 是一个prop，所以你可以做任何你可以用prop 做的事情。我添加了两个 sn-ps 的答案：一个使用 computed 值来更改此道具，第二个添加 method 来更改此道具的值。

标签： vue.js vuejs2 vue-component vuex

【解决方案1】：

你的意思是这样的吗？

<a @click="functionThatExecutesMyCode">
  <span class="icon icon-home i-large" />
  <span class="class-2">Name</span>
</a>

functionThatExecutesMyCode() {
   this.$router.push({ to: 'newRoute'})
}

否则你应该使用导航守卫：https://router.vuejs.org/guide/advanced/navigation-guards.html

【讨论】：

我仍然想要 router-link ，但我无法在其上添加 click 事件并删除 to 道具。

【解决方案2】：

我认为不可能更改 :to props 来添加函数，因为它被预定义为仅接受其文档中的字符串。 https://router.vuejs.org/api/#to

但是，我建议另一种实现您想要的方式，您可以在beforeEach 钩子中添加逻辑。例如

router.beforeEach( (to, from, next) => {

  // implement your logic here, for example if no internet, go to error page

  if (!navigator.onLine && to.name !== "NetworkError") {
    next({ name: "NetworkError" });
    return false;
   }
  next();
}

有关更多信息，请查看他们的文档：https://router.vuejs.org/api/#router-beforeeach

【讨论】：

【解决方案3】：

这取决于你到底想要什么。

有更简单的解决方案，例如：

const Root = {
  template: '<div>Root</div>'
}
const Route1 = {
  template: '<div>Route1</div>'
}

const routes = [{
    path: '/',
    name: 'root',
    component: Root
  },
  {
    path: '/1',
    name: 'route1',
    component: Route1
  }
]

const router = new VueRouter({
  routes // short for `routes: routes`
})

new Vue({
  el: "#app",
  router,
  data: {
    selected: 'root',
    options: ['root', 'route1']
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<div id="app">
  <select v-model="selected">
    <option v-for="(option, i) in options">
      {{ option }}
    </option>
  </select>
  <router-view></router-view>
  <router-link :to="{ name: selected }">{{ selected }}</router-link>
</div>

在这个解决方案中，我使用了named route，“名称”可以通过选择输入来更改。

下一个解决方案是合并一个函数：

const Root = {
  template: '<div>Root</div>'
}
const Route1 = {
  template: '<div>Route1</div>'
}

const routes = [{
    path: '/',
    name: 'root',
    component: Root
  },
  {
    path: '/1',
    name: 'route1',
    component: Route1
  }
]

const router = new VueRouter({
  routes // short for `routes: routes`
})

new Vue({
  el: "#app",
  router,
  data: {
    selected: 'root',
    options: ['root', 'route1']
  },
  methods: {
    changeRouteName() {
      return this.selected
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<div id="app">
  <select v-model="selected">
    <option v-for="(option, i) in options">
      {{ option }}
    </option>
  </select>
  <router-view></router-view>
  <router-link :to="{ name: changeRouteName() }">{{ selected }}</router-link>
</div>

通过添加method 来解析组件的name，可以在to 的to 上构建任何逻辑。当然，您也可以使用 path 代替 name - 我只是喜欢命名组件。

它不会从 to 属性中删除 click 事件，但您可以在返回“等待”的 name 之前执行您的逻辑。

【讨论】：