vue.js - 奇怪的 VueJS 路由行为

Question

我的路由有问题。我有一个简单的点击处理程序可以推送到路由器。

methods: {
   page(path) {
      this.$router.push(path);
   }
}

这将显示正确的内容，但 URL 短暂转到正确的 URL，然后返回到上一个 URL。我只是知道它发生了，因为当我单击“后退”浏览器按钮时，URL 是正确的。

我打开控制台并决定测试路由器

$vm0.$router.push('/my-path');

不仅显示了正确的内容，而且 URL 也正确。

我现在很困惑如何进一步调试它，所以如果有人有任何想法请告诉我。

路由器.js

import VueRouter from 'vue-router';

const routes = [
    { path: '/', component: require('./views/Campaigns').default },
    { path: '/foo', component: require('./views/Foo').default },
    { path: '/campaign/edit', component: require('./views/EditCampaign').default },
];

export default new VueRouter({
    routes
});

main.js

import Vue from 'vue'
import VueRouter from 'vue-router';
import router from './routes';

Vue.config.productionTip = false;
Vue.use(VueRouter);

new Vue({
  el: '#app',
  router
});

问候

Answer 1

您将点击事件附加到 <a>元素，因此您需要阻止默认的点击行为，即跟随链接。

您可以通过两种方式实现这一目标:

<强>1。使用事件修饰符

To address this problem, Vue provides event modifiers for v-on. Recall that modifiers are directive postfixes denoted by a dot.

<a @click.prevent="page('/foo')">Button</a>

<强>2。使用事件处理程序

如果您需要访问事件对象:

<a @click="page('/foo', $event)">Button</a>

page(path, e) {
  e.preventDefault()
  this.$router.push(path)
}

这也可能适用于其他类型元素上的单击事件，例如表单内的按钮。 Source