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

vue中router和route的区别

news 来源：原创 2025/5/9 8:28:21

在Vue.js框架中，$route和$router是两个经常被提及的概念，它们在路由功能中扮演着不同的角色。

1.router

//导入路由实例router//组合式代码示例:
<script setup>
import { useRouter } from "vue-router";
const router = useRouter();
</script>//选项式代码示例:
<script>
import { useRouter } from 'vue-router';
export default {setup() {const router = useRouter();},
};
</script>

router是“路由实例”，它是VueRouter的实例，包含了路由的跳转方法、钩子函数等。我们通过router，可以编程式地导航到不同的路由，用router调用跳转方法实现页面跳转，例如：

router.push({ path: 'home' })：导航到一个不同的URL，会向history栈添加一个新的记录。

router.replace({ path: 'home' })：跳转到一个不同的URL，但不会向history栈添加新的记录。

router.go(整数)：在history记录中向前或向后跳转。

router.back()：在history记录中向后跳转。

router.forward()：在history记录中向前跳转。

2.route

//导入路由信息对象//组合式代码示例:
<script setup>
import { useRoute } from 'vue-router'
const route = useRoute()
</script>//选项式代码示例:
<script>
import { useRoute } from 'vue-router';
export default {setup() {const route = useRoute();},
};
</script>

route是“路由信息对象”，它包含了如路径（path）、查询参数（query）、路由参数（params）等和当前路由相关的信息。这些信息可以帮助开发者获取当前路由的状态，例如：

route.path：类型（string字符串），表示当前路由的绝对路径。

route.params：类型（Object对象），包含动态片段和全匹配片段的键值对（类似POST请求）。

route.query：类型（Object对象），表示URL查询参数（类似GET请求）。

route.hash：类型（string字符串），当前路由的hash值。

route.fullPath：类型（string字符串），完整的URL路径，包含查询参数和hash值。

route.matched：类型（ Array<RouteRecord>数组），包含当前匹配的路径中所有片段所对应的配置参数对象。

route.name：当前路由的名称，如果有的话。

route.meta：路由元信息。

route.redirectedFrom：如果存在重定向，即为重定向来源的路由的名字。
你可以建一个route路由信息对象，并将它在代码中打印出来看看便可明白，router和route的区别。

在Vue组件中，$route和$router可以通过this.$route和this.$router访问。$route主要用于获取当前路由的详细信息，而$router主要用于触发路由的变化。

例如，当你需要获取当前路由的参数时，你可以使用this.$route.params来获取；当你需要跳转到另一个路由时，你可以使用this.$router.push('/another-route')来实现。

总结来说，$route是关于当前路由的信息的集合，而$router是VueRouter实例，用于控制路由的跳转和操作。