使用Vue路由器响应参数更改的最佳实践

w46czmvw 于 2023-02-19 发布在 Vue.js

关注(0)|答案(3)|浏览(156)

当使用Vue Router处理/foo/:val这样的路由时，你必须添加一个观察器来对参数变化做出React。这会导致在URL中有参数的所有视图中出现一些烦人的重复代码。
这可能类似于以下示例：

export default {
    // [...]
    created() {
        doSomething.call(this);
    },
    watch: {
        '$route' () {
            doSomething.call(this);
        }
    },
}

function doSomething() {
    // e.g. request API, assign view properties, ...
}

有没有其他方法可以克服这个问题？created和$route的处理程序可以合并吗？组件的重用可以禁用吗？这样就不需要监视器了吗？我使用的是Vue 2，但这可能对Vue 1也有意义。

vue.js

来源：https://stackoverflow.com/questions/40404787/best-practice-for-reacting-to-params-changes-with-vue-router

3条答案

按热度按时间

mec1mxoz1#

由于GitHub的问题，我刚刚找到了一个可能的答案，如下所示。
可以使用key属性（也用于v-for）让Vue跟踪视图中的更改。要使其工作，必须将该属性添加到router-view元素中：

<router-view :key="$route.fullPath"></router-view>

将此组件添加到视图中后，就不再需要查看$route了，相反，Vue.js将创建一个全新的组件示例，并调用created回调函数。
然而，这是一个全有或全无的解决方案。它似乎在我目前正在开发的小应用程序上工作得很好。但它可能会影响其他应用程序的性能。如果您真的希望仅对某些路线禁用视图的重用，您可以考虑基于路线设置key的值。但我真的不喜欢这种方法。

赞(0）回复(0）举报 2023-02-19

hkmswyz62#

我在router-view组件上使用了这个没有:key属性的变体。
routes.js:

{
        path: 'url/:levels(.*)',
        name: ROUTES.ANY_LEVEL,
        props: true,
        component: (): PromiseVue => import('./View.vue'),
      },

view.vue

<template>
    <MyComponent :config="config" />
</template>

---*****----

<script>
data: () => ({ config: {} }),
methods: {
    onConfigurationChanged(route) {
      const { params } = route

      if (params && params.levels) {
        this.config = // some logic
      } else {
        this.config = null
      }
    },
  },
  beforeRouteUpdate(to, from, next) {
    this.onConfigurationChanged(to)
    next()
  },
}
</script>

在组件内部，我使用config作为属性。在我的例子中，React性被保留，并且组件会根据同一URL内的参数变化自动更新。

赞(0）回复(0）举报 2023-02-19

2mbi3lxu3#

vue3和脚本设置：

watch(route, () => { fetch()})

在进口方面：

import { watch } from 'vue';
import { useRoute } from 'vue-router';
const route = useRoute()

赞(0）回复(0）举报 2023-02-19

我来回答

使用Vue路由器响应参数更改的最佳实践

3条答案

相关问题

热门标签

最新问答