Vue监听route属性

在Vue.js应用中，路由管理是实现单页面应用（SPA）的关键部分。Vue Router是Vue.js官方提供的路由管理器，它允许开发者根据不同的URL路径展示不同的组件。在实际开发中，我们经常需要监听路由的变化来执行一些特定的操作，比如加载数据、更改组件状态等。本文将详细介绍如何在Vue 2.x中监听$route属性，并通过多个示例来展示其应用场景。

基本概念与作用

Vue Router简介

Vue Router是Vue.js的官方路由管理器，它提供了声明式的路由配置方式，并支持嵌套路由、嵌套视图、导航守卫等功能。通过Vue Router，我们可以轻松地实现SPA的路由管理。

监听$route属性的意义

$route对象包含了当前路由的所有信息，包括路径、参数、查询字符串等。通过监听$route的变化，我们可以在路由发生变化时执行特定的逻辑，比如重新加载数据、更新组件状态等。这对于构建动态和响应式的用户界面非常重要。

示例一：基本的路由监听

首先，我们来看一个基本的例子，如何在组件中监听路由的变化。

创建路由配置

// router/index.js
import Vue from 'vue';
import Router from 'vue-router';
import Home from '../components/Home.vue';
import About from '../components/About.vue';

Vue.use(Router);

export default new Router({
   
  routes: [
    {
    path: '/', component: Home },
    {
    path: '/about', component: About }
  ]
});

在组件中监听$route

// components/Home.vue
<template>
  <div>
    <h1>Home Page</h1>
  </div>
</template>

<script>
export default {
   
  watch: {
   
    '$route' (to, from) {
   
      // 当路由发生变化时执行的逻辑
      console.log('Route changed from', from.path, 'to', to.path);
    }
  }
};
</script>

在这个例子中，我们在Home组件中使用watch来监听$route的变化，并在控制台输出当前路由和上一个路由的信息。

示例二：根据路由变化加载数据

在实际应用中，我们经常需要在路由变化时重新加载数据。下面是一个示例，展示了如何在路由变化时加载数据。

创建路由配置

// router/index.js
import Vue from 'vue';
import Router from 'vue-router';
import News from '../components/News.vue';

Vue.use(Router);

export default new Router({
   
  routes: [
    {
    path: '/news/:category', component: News }
  ]
});

在组件中加载数据

// components/News.vue
<template>
  <div>
    <h1>News for {
   {
    category }}</h1>
    <ul>
      <li v-for="item in newsList" :key="item.id">{
   {
    item.title }}</li>
    </ul>
  </div>
</template>

<script>
export default {