vue 中$router和$route的区别和使用

this.$router：全局的 router 实例。通过 vue 根实例中注入 router 实例，然后再注入到每个子组件，从而让整个应用都有路由功能。其中包含了很多属性和对象（比如 history 对象），任何页面也都可以调用其 push(), replace(), go() 等方法。

<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()
// 路由跳转
function toRoute(path) {
  router.push(path);
}
</script>

 

this.$route：当前激活的路由的信息对象。每个对象都是局部的，可以获取当前路由的 path, name, params, query 等属性。 

路由对象的属性:

• $route.path：类型: string字符串，对应当前路由的路径，总是解析为绝对路径，如 “/foo/bar”。
• $route.params：类型: Object，一个 key/value 对象，包含了动态片段和全匹配片段，如果没有路由参数，就是一个空对象。
• $route.query：类型: Object，一个 key/value 对象，表示 URL 查询参数。例如，对于路径 /foo?user=1，则有 $route.query.user == 1，如果没有查询参数，则是个空对象。
• $route.hash：类型: string，当前路由的 hash 值 (带 #) ，如果没有 hash 值，则为空字符串。
• $route.fullPath：类型: string，完成解析后的 URL，包含查询参数和 hash 的完整路径。
• $route.name：当前路由的名称，如果有的话。(查看 命名路由 | Vue Router官网 )
• $route.redirectedFrom：如果存在重定向，即为重定向来源的路由的名字。(参阅 重定向和别名 | Vue Router官网）
• $route.matched：类型: Array<RouteRecord> ，一个数组，包含当前路由的所有嵌套路径片段的路由记录 。 路由记录就是 routes 配置数组中的对象副本 (还有在 children 数组)。

<script setup>
import { useRoute } from 'vue-router'
const route = useRoute()
// 得到当前路由
const currentRoute = computed(() => { return route.path })
</script>