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) 的,每次成功的导航后都会产生一个新的对象。常用的有
- path:对应当前路由的路径,如 “/about”。
- name:当前路由的名称,如果有的话
- meta:路由元信息
- query:一个 key/value 对象,表示 URL 查询参数。例如,对于路径
/foo?user=1
,则有$route.query.user == 1
,如果没有查询参数,则是个空对象。也包括通过 query传递的参数。