Question

我需要更新url的哈希值，而无需实际触发vue-router转到该路由。诸如此类的东西：

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

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

是否有一种优雅的方法来实现这一目标？

Answer 1

无需重新加载页面或刷新dom，history.pushState即可完成工作。
在您的组件或其他地方添加此方法可以做到这一点：

addHashToLocation(params) {
  history.pushState(
    {},
    null,
    this.$route.path + '#' + encodeURIComponent(params)
  )
}

因此，在组件中的任何位置，调用addHashToLocation('/my/new/path')可以使用window.history堆栈中的查询参数推送当前位置。

要将查询参数添加到当前位置而无需推送新历史记录条目，请改用history.replaceState。

应该与Vue 2.6.10和Nuxt 2.8.1一起使用。

Answer 2

Vue路由器处于打开或关闭状态，因此您不能“使其无法检测到某些URL”。就是说，Vue不需要销毁组件就可以重用它们，并允许您别名url。这样一来，您便可以将iframe应用程序中的网址作为路由中的别名，并在此期间使同一组件保持活动状态，从而避免重新加载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，从而导致组件{ {1}}活着。

Answer 3

如果您想要做的是更新 url 以显示页面状态（可能类似于 ?search=something），那么您可以使用这样的技巧。关键思想是使用切换 this.respondToRouteChanges 在您的代码更新网址时忽略更改。

更新路由时（例如，在组件中的 vue 方法中）

          this.respondToRouteChanges = false;
          this.$router.replace({query: { search: this.search })
              .finally(() => {
                this.respondToRouteChanges = true;
              });

在通常会观察/处理路由变化的组件代码中

    setSearch() {
      if (!this.respondToRouteChanges){
        // console.log('ignoring since route changes ignored')
        return;
      }
      if (this.search !== this.querySearch)
        this.search = this.querySearch;
    },

  watch: {
     // watch for changes in the url
    'querySearch': 'setSearch',

请注意，respondToRouteChanges 只是在组件中定义为 data() 的布尔值

  data() {
    return {
      respondToRouteChanges: true,
      ...

querySearch 只是一个返回路由的计算值

    querySearch() {
      return this.$route.query.search || '';
    },

Answer 4

我找到了如何Silently update url，但是无论如何都会触发路由（但这可能不是问题，取决于情况）。

在我的情况下，用户可以例如通过URL http://localhost:8080/#/user/create/创建配置文件，提供一些配置文件信息，一旦单击“保存”，用户将使用URL重定向到他/她创建的配置文件，例如{{1} }，用户可以在其中继续编辑个人资料表单。

我该怎么做？

http://localhost:8080/#/FaFYhTW9gShk/页面（ProfileCreate）和user/create/页面（ProfileDetails）使用相同的FaFYhTW9gShk/组件。

ProfileUser

在// router.js const routes = [ { path: '/user/create', component: Profile, children: [ { path: '', name: 'ProfileCreate', component: ProfileUser } ] } { path: '/:profileUrl', component: Profile, children: [ { path: '', name: 'ProfileDetails', component: ProfileUser } ] } ]中，我是否需要从后端加载数据，还是只需要更改URL？

router.beforeEach

单击“保存”按钮后，在// router.js router.beforeEach((to, from, next) => { if (!('isProfileLoaded' in to.params)) { // load profile from backend and update Vuex } next() })中，我将数据发送到后端并致电action

router.push

只要提供了// action.js import router from '@/router' // Here I send data to backend // Some code // Update-URL-Trick router.push({ name: 'ProfileDetails', params: { profileUrl: profileUrl isProfileLoaded: true } })，Vue就会重新使用来自Vuex +路由器isProfileLoaded的配置文件数据，并使用相同的silently组件来更新URL。

静默更新url而不触发vue-router中的路由

4 个答案: