玩转vue-router的简单用法

在 Vue 3 中，vue-router 提供了两个非常有用的组合式 API 函数：useRouter 和 useRoute。它们分别用于不同的目的，帮助你更方便地进行路由导航和获取当前路由的信息。

useRouter

useRouter 是一个返回当前应用的 router 实例的函数。通过这个实例，你可以执行编程式的导航操作，如跳转到新的页面、替换当前页面等。

主要用途：

• 执行导航操作（例如跳转到不同的路由）。
• 访问路由实例的方法，如 push、replace、go 等。

常用方法：

• router.push(location)：导航到一个新的路由地址。
• router.replace(location)：替换当前的路由地址（不会添加新的历史记录）。
• router.go(n)：在浏览器历史记录中前进或后退 n 步。
• router.back()：回到上一页（相当于 router.go(-1)）。
• router.forward()：前进到下一页（相当于 router.go(1)）。

import { useRouter } from 'vue-router';

export default {
  setup() {
    const router = useRouter();

    const navigateToHome = () => {
      router.push('/home'); // 跳转到首页
    };

    const replaceWithAbout = () => {
      router.replace('/about'); // 替换当前路由为关于页
    };

    const goBack = () => {
      router.back(); // 返回上一页
    };

    return { navigateToHome, replaceWithAbout, goBack };
  }
};

useRoute 

useRoute 是一个返回当前激活的路由对象的函数。这个对象包含了当前 URL 解析后的信息，比如路径、查询参数、参数、哈希值等。

主要用途：

• 获取当前路由的相关信息（例如路径、参数、查询参数等）。

常用属性：

• route.path：当前路径。
• route.name：当前路由的名称（如果有配置的话）。
• route.params：动态路由参数。
• route.query：URL 查询参数。
• route.fullPath：完整路径（包括查询参数和哈希值）。
• route.meta：路由元信息（如果有的话）。

import { useRoute } from 'vue-router';

export default {
  setup() {
    const route = useRoute();

    const currentPath = route.path; // 当前路径
    const queryParams = route.query; // 查询参数
    const dynamicParams = route.params; // 动态参数

    console.log('当前路径:', currentPath);
    console.log('查询参数:', queryParams);
    console.log('动态参数:', dynamicParams);

    return { currentPath, queryParams, dynamicParams };
  }
};

使用示例 

import { useRouter, useRoute } from 'vue-router';

export default {
  setup() {
    const router = useRouter();
    const route = useRoute();

    const handleNavigation = () => {
      const id = route.query.id; // 获取查询参数中的 id

      if (id) {
        router.push(`/details/${id}`); // 根据 id 导航到详情页
      } else {
        router.push('/error'); // 如果没有 id，导航到错误页面
      }
    };

    return { handleNavigation };
  }
};

别写错。别写错。别写错！