Vue - route路由（router-link、useRoute、useRouter）

为了避免反复在 app.vue 中去修改引入的路径，当用了新的页面，想切换回老页面的时候，都需要去手动改变路径，那么有没有一种可能，可以在一个地方，把这些组件配置好，然后通过不同的路径，就去访问不同的组件呢？vue router就提供了这个功能，翻译一下，router：路由，vue router， vue的路由。

单页面应用：SPA

SPA 的核心思想是将应用划分为多个组件，通过前端路由来控制不同组件的显示，实现页面的切换和更新。

主要特点和优势包括：

1. 无需刷新页面： SPA 通过 AJAX 或 WebSocket 等技术实现页面内容的异步加载和更新，用户在应用中切换页面时不需要重新加载整个页面，提供了更加流畅的用户体验。
2. 动态加载： 只加载所需的内容和资源，避免了每次访问都加载整个页面的开销，减轻了服务器的负担，提高了页面加载速度。
3. 前端路由： SPA 使用前端路由来管理不同页面之间的切换，而不是依赖后端路由。这样可以在不同页面之间切换，而不需要向服务器发出新的请求。
4. 更接近传统应用体验： SPA 的用户体验更接近传统桌面应用，因为用户在应用中导航时不会感觉到整个页面的刷新，从而提高了用户满意度。
5. 更容易实现动态内容： 由于SPA采用了前端路由，可以更容易地实现动态加载内容、无感知地获取数据，以及实现一些类似于懒加载的技术。

一、router - link

（一）基本语法：

    跳转到列表


// 或者
跳转到详情

（二）使用方式：

1. 使用路径字符串

可以直接使用路径字符串作为 to 属性的值：

跳转111
跳转222

 2. 使用路由对象

还可以使用一个对象来指定路由的详细信息，比如路径、参数和查询参数：

    跳转到用户管理

3. 使用路由名称

如果在路由配置中定义了路由名称（可以叫做小名、别名，用 name 属性定义的），可以通过名称来导航：

    跳转至用户管理

 组件支持多个属性，常用的包括：

• to：目标路由，可以是字符串或对象。
• tag：指定渲染的标签，默认为 a。
• replace：如果设置为 true，则在导航时将替换当前历史记录，而不是添加新的记录。
• active-class：指定激活状态下的 CSS 类名，默认为 router-link-active。
• exact-active-class：指定完全匹配状态下的 CSS 类名，默认为 router-link-exact-active。

补充说明：（什么时候使用 ：）

1.动态绑定：当我们需要根据 组件的状态 或 计算属性动态生成目标路由时，需要使用 :。这意味着 to 的值是一个 JavaScript 表达式。

跳转

在这个例子中，dynamicPath 是一个在组件中定义的变量，它的值可以在运行时改变

2.对象形式：当我们使用对象形式来定义 to 属性时，也需要使用 :。对象形式允许我们传递更复杂的路由信息，例如路径、参数和查询参数。

    用户详情

在这个例子中，userId 是一个变量，表示用户的 ID。使用 : 可以确保 Vue 解析这个变量并将其值传递给 to 属性。

说明一下 - 什么时候不使用：“ : ”

静态字符串：如果直接使用静态字符串作为 to 的值，则不需要使用 :。

主页

在这个例子中，"/home" 是一个静态字符串，Vue 不需要解析它，因此不需要使用 :。

总结：

• 使用 : 来绑定 to 属性时，意味着希望 Vue 解析一个 JavaScript 表达式（例如变量或计算属性）。
• 当 to 的值是一个静态字符串时，可以直接使用而不需要 : 。
• 使用 : 的主要目的是为了确保 Vue 能够动态地处理和更新属性值，这在构建动态路由时非常有用。

二、useRoute

用于在 Vue 组件中访问当前路由的信息。通过 useRoute，可以获取当前路由的各种信息，例如路径、参数、查询字符串等。

可以通过，params 和 query 来向页面中传递数据，就是通过这个 useRoute 方法来获取到

（一）基本语法：

import { useRoute } from 'vue-router';
// 获取一个 路由 的实例
const route = useRoute();

const route = useRoute();
console.log(route.query);
console.log(route.params);

三、useRouter

使用 useRouter 也可以进行页面的跳转，此方法返回一个路由的实例，在这个实例中，有一个push 方法，用此方法，就可以跳转路由，他接受的参数，跟上面的 router link 相同。

通过路由名称传参：

通过 name 属性定义的：

import { useRouter } from "vue-router";
// 获取路由实例
const router = useRouter();


// 通过路由名称跳转：

const goDetail = (id) => {
    router.push({
        name: 'detail', // 使用路由名称进行导航
        query: {
            id: id // 传递查询参数
        }
    });
}
// 在这个方法中，router.push 被用来导航到名称为 detail 的路由，
//并将 id 作为查询参数传递。这种方式适合于使用命名路由的情况。

通过路径跳转：

通过 path 属性 定义的：

// 通过 路径 path 传递参数
const goDetail2 = (item) => {
    router.push({
        path: '/detail', // 使用路径进行导航
        query: item, // 将整个 item 对象作为查询参数
    });
};
// 这个方法使用 router.push 通过路径直接跳转到 /detail，
// 并将 item 对象作为查询参数传递。这种方式适合于直接指定路径的情况。

四、示例

整体说明：

• useRoute：用于访问当前路由的信息，比如路由参数、查询参数等。
• useRouter：用于获取路由实例，可以用来进行路由跳转等操作。

const route = useRoute();

• route.query：获取当前路由的查询参数。
• route.params：获取当前路由的路径参数。

通过路径跳转：path 属性

    跳转到贷款管理

这段代码使用  组件进行路由跳转。它的 to 属性指定了目标路由的路径和查询参数。当用户点击这个链接时，应用会导航到 /loan 路由，并附带查询参数 name=xxx。

通过名称跳转：name 属性

    跳转到用户详情

这个  组件通过路由的名称进行跳转。它的 to 属性指定了一个对象，包含了目标路由的名称（userManage）。当用户点击这个链接时，应用会导航到对应的路由。

路由跳转方式：

const goDetail = (id) => {
    router.push({
        name: 'detail',
        query: {
            id: id 
        }
    });
}

这个方法 goDetail 接受一个 id 参数，并使用 router.push 方法进行路由跳转。它将目标路由的名称设为 detail，并通过 query 传递 id 参数。当调用这个方法时，应用会导航到 detail 路由，并在 URL 中包含查询参数 id。

const goDetail2 = (item) => {
    router.push({
        path: '/detail',
        query: item,
    });
};

这个方法 goDetail2 接受一个 item 参数，使用 router.push 方法跳转到 /detail 路由，并将 item 对象作为查询参数传递。在这种情况下，item 的所有属性都会被转换为查询字符串的一部分。

重点：

• useRoute：用于访问当前路由的信息，比如路由参数、查询参数等。
• useRouter：用于获取路由实例，可以用来进行路由跳转等操作。
• 了解 userRouter 来跳转页面。