Vue.js 在 vuerouter 中静默更新 url 而不会触发路由

发布于07月15日

我需要更新url的散列，而不是触发vue路由进入该路由.比如:

router.replace('my/new/path', {silent:true})

这会将url更新为.../#/my/new/path，但路由本身不会路由到该路径.

有没有一种优雅的方式来实现这一点？

推荐答案

Vue路由处于打开或关闭状态，因此您无法"使其无法检测到某些URL".也就是说，如果Vue不需要销毁组件，它会重复使用组件，并允许您为URL添加别名.这允许您将iframe应用程序中的URL作为路由中的别名，并在这段时间内保持同一组件的活动状态，防止iframe重新加载.

// router.js
import Comp1 from "./components/Comp1";
import Comp2 from "./components/Comp2";

export default [
  {
    path: "/route1",
    component: Comp1,
    alias: ["/route2", "/route3", "/route4"]
  },
  {
    path: "/otherroute",
    component: Comp2
  }
];

// main.js
import Vue from "vue";
import App from "./App";
import VueRouter from "vue-router";
import routes from "./router";

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

const router = new VueRouter({
  routes
});

/* eslint-disable no-new */
new Vue({
  el: "#app",
  router,
  components: { App },
  template: "<App/>"
});

在本例中，route1、route2、route3和route4都将被视为必须加载route1，从而使组件Comp1保持活动状态.