VUE中router 和 route的区别

vue3中通过相应的方法来创建router和route对象

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

const router = useRouter()
const route = useRoute()

console.log('router',router);
console.log('route',route);

router

全局路由对象，有多种属性和方法，包含所有的路由，常见的方法有

• push：跳转页面，向 history 栈中添加一个路由
• replace：替换路由，没有历史记录 （动态路由会用到）
• go：在 history 记录中向前或者后退多少步

route

局部路由对象，表示当前激活的路由的状态信息，包含了当前 URL 解析得到的信息，还有 URL 匹配到的路由记录 (route records)。路由对象是不可变 (immutable) 的，每次成功的导航后都会产生一个新的对象。常用的有

1. path：对应当前路由的路径，如 “/about”。
2. name：当前路由的名称，如果有的话
3. meta：路由元信息
4. query：一个 key/value 对象，表示 URL 查询参数。例如，对于路径 /foo?user=1，则有 $route.query.user == 1，如果没有查询参数，则是个空对象。也包括通过 query传递的参数。