当前位置：首页 > news >正文

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

news 来源：原创 2025/6/28 13:08:56

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

单页面应用：SPA

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

主要特点和优势包括：

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

一、router - link

（一）基本语法：

<router-link :to="{ path: 'list', query: { id: '1' }, params: { test: 1 } }">跳转到列表
</router-link>// 或者
<router-link to="detail">跳转到详情</router-link>

（二）使用方式：

1. 使用路径字符串

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

<router-link to="/home">跳转111</router-link>
<router-link to="/about">跳转222</router-link>

2. 使用路由对象

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

<router-link :to="{ path: '/user', query: { id: 123 } }">跳转到用户管理
</router-link>

3. 使用路由名称

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

<router-link :to="{ name: 'user', params: { id: 123 } }">跳转至用户管理
</router-link>

<router-link> 组件支持多个属性，常用的包括：

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

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

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

<router-link :to="dynamicPath">跳转</router-link>

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

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

<router-link :to="{ name: 'user', params: { id: userId } }">用户详情
</router-link>

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

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

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

<router-link to="/home">主页</router-link>

在这个例子中，"/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 对象作为查询参数传递。这种方式适合于直接指定路径的情况。

四、示例

<template><div v-if="route.query.id">查看详情</div><div>菜单管理</div><!-- 通过path跳转 --><router-link :to="{path: '/loan',query: {name:'xxx'}}">跳转到贷款管理</router-link><!-- 通过name别名跳转 --><router-link :to="{name: 'userManage'}">跳转到用户详情</router-link><div>菜名：<input type="text" v-model="menuName"><button @click="search">搜索</button><table><thead><tr><th>id</th><th>菜名</th><th>价格</th></tr></thead><tbody><tr v-for="(item,index) in dataSource" :key="index"><td>{{ item.id }}</td><td>{{ item.name }}</td><td>{{ item.price }}</td><td><button @click="()=>goDetail(item.id)">查看详情</button></td><td><button @click="()=>goDetail2(item)">查看详情2</button></td></tr></tbody></table></div></template><script setup>
import { ref } from 'vue';
import { getMenuList, searchMenu } from '../service/menu';
// 获取数据 参数 用 useRoute
import { useRoute } from 'vue-router';
// 跳转页面使用 useRouter
import { useRouter } from 'vue-router';const route = useRoute();
// 可以返回一个 路由 实例
const router = useRouter();
const dataSource = ref([]);
const menuName = ref('');
//获取菜单列表
const menuList = async () => {const res = await getMenuList();dataSource.value = res.data.data.record;console.log(dataSource.value);}
menuList();// 搜索菜名
const search = async () => {const res = await searchMenu({name: menuName.value});dataSource.value = res.data.data.record;
}// 查看详情跳转页面 route router
const goDetail = (id) => {router.push({name: 'detail',query: {id:id }});
}
/// 展示详情信息
const goDetail2 = (item) => {router.push({path: '/detail',query: item,});
};</script><style></style>

整体说明：

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

const route = useRoute();

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

通过路径跳转：path 属性

<router-link :to="{path: '/loan', query: {name:'xxx'}}">跳转到贷款管理
</router-link>

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

通过名称跳转：name 属性

<router-link :to="{name: 'userManage'}">跳转到用户详情
</router-link>

这个 <router-link> 组件通过路由的名称进行跳转。它的 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 来跳转页面。

一、router - link

（一）基本语法：

（二）使用方式：

1. 使用路径字符串

2. 使用路由对象

3. 使用路由名称

二、useRoute

（一）基本语法：

三、useRouter

通过路由名称传参：

通过路径跳转：

四、示例

相关文章：