vue 路由地址监听

以下是Vue实现路由监听的方法：

watch: {
  $route(to, from) {
    // 监听路由变化
    console.log(to.path, from.path)
  }
}

在Vue组件中，可以使用`watch`属性来监听`$route`对象的变化，从而实现路由地址的监听。`$route`对象包含了当前路由的信息，包括路由地址、参数等。在`watch`属性中，我们可以通过监听`$route`对象的变化来实现路由地址的监听。

如果需要监听路由参数的变化，可以使用`$route.params`对象来实现。例如：

watch: {
  '$route.params': {
    handler(newParams, oldParams) {
      // 监听路由参数变化
      console.log(newParams, oldParams)
    },
    deep: true
  }
}

在上面的代码中，我们使用了`deep`选项来深度监听`$route.params`对象的变化。这样，当路由参数发生变化时，`handler`函数就会被调用，从而实现路由参数的监听。

相关问题

vue3watch监听路由

Vue3中的`watch`可以用于监听路由变化，这通常在需要基于路由改变某些组件状态或者显示内容的时候非常有用。你可以创建一个`watch`实例，在`beforeRouteUpdate`或`beforeEach`钩子函数中设置，它会在每次路由更新时触发。

例如：

import { useRoute } from 'vue-router';
import { ref } from '@vue/runtime-core';

export default function useCurrentRoute() {
  const route = useRoute();
  
  // 创建一个ref来保存当前路由的值
  const currentPath = ref(route.path);
  
  // 使用watch监听route的变化
  watch(
    () => route,
    (newRoute) => {
      currentPath.value = newRoute.path;
      // 在这里执行当路由变化时你需要的操作
      console.log('当前路由已更新到:', currentPath.value);
    },
    {
      immediate: true, // 设置初始立即运行
      deep: false,     // 如果路径是对象，是否深度监听，这里通常是false
    }
  );

  return { currentPath };
}

在这个例子中，每当路由发生变化，`currentPath`就会更新，并打印出新的路径。你可以根据实际需求在回调中做更多的处理，比如更新数据、切换视图等。

vue2watch监听路由

在Vue 2中，可以使用watch选项来监听路由的变化。有几种方法可以实现这个功能，以下是其中一种方法：

watch: {
'$route': function(to, from) {
console.log(to.path);
}
}

这个方法通过监听$route对象来实现路由的监听。当路由发生变化时，函数会被调用，并接收到新的路由对象(to)和旧的路由对象(from)。在这个例子中，我们将新的路由路径(to.path)打印出来。

还有其他几种方法可以实现路由的监听，你可以根据自己的需求选择适合你的方法。