vue在页面中使用watch 监听路由，请给出示例

当路由变化时，我们可以通过watch属性来监听变化。可以在vue组件内使用以下代码来监听路由变化：

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

假设我们有一个页面是通过路由打开的，我们可以在该页面的vue组件内使用以上代码来监听路由变化，具体示例如下：

<template>
  <div>
    <h1>{{ title }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: ''
    }
  },
  watch: {
    $route(to, from) {
      // 监听路由变化
      console.log('路由从', from, '变为', to)
      this.title = to.name + ' - My Website' // 修改页面标题
    }
  }
}
</script>

以上示例中，我们在watch属性内监听了$route，并在路由发生变化时修改了页面标题。

相关问题

vue3 watch监听路由改变写法

在Vue 3中，你可以使用`watch`函数来监听路由变化。通常，我们会监听Vue Router的`$route`对象来检测路径的变化。以下是一个示例代码，展示了如何使用Vue 3的Composition API来实现对路由变化的监听：

import { ref, watch } from 'vue';
import { useRoute } from 'vue-router';

export default {
  setup() {
    const route = useRoute(); // 获取当前路由实例
    const currentPath = ref(route.path); // 使用ref创建响应式的路径数据

    // 监听路由变化
    watch(
      () => route.path, // 监听route.path变化
      (newValue, oldValue) => {
        console.log(`路由从 "${oldValue}" 变化到了 "${newValue}"`);
        // 这里可以执行路由变化后需要的操作，比如获取新的路由参数
      }
    );

    // 你也可以在这里返回需要暴露给模板的数据或方法
    return {
      currentPath,
    };
  },
};

在上面的代码中，我们首先从`vue-router`中引入了`useRoute`函数，用以获取当前的路由对象。然后，我们创建了一个响应式的变量`currentPath`来存储当前的路由路径，并使用`watch`函数监听`route.path`的变化。每当路由路径发生变化时，`watch`的回调函数会被触发，你可以在这个回调函数中执行需要的操作。

watch监听路由参数

在Vue中，可以使用watch属性来监听路由参数的变化。下面是一个示例代码：

watch: {
  '$route'(to, from) {
    // 监听路由参数的变化
    console.log('路由参数发生了变化');
    console.log('从', from.params, '到', to.params);
  }
}

在上面的代码中，`$route`是Vue的内置属性，用于监听路由的变化。当路由参数发生变化时，watch函数会被触发，并且会传入两个参数：`to`和`from`，分别表示变化后的路由参数和变化前的路由参数。

你可以在watch函数中编写你想要执行的操作，比如更新数据、发送请求等。