vue3之声明式和编程式导航

vue3之声明式和编程式导航

在组件内部,可以使用 r o u t e r 属性访问路由,例如 t h i s . router 属性访问路由,例如 this. router属性访问路由,例如this.router.push(…)。如果使用组合式 API,你可以通过调用 useRouter() 来访问路由器,导入后赋值给变量就行了,如:const router = useRouter();

声明式 编程式
<router-link :to=“…”> router.push(…)
<router-link :to=“…” replace> 替换路由:router.replace(…)
替换路由或:router.push({ path: ‘/home’, replace: true }),相当于router.replace({ path: ‘/home’ })

编程式router.push(…) 多种写法:

// 字符串路径
router.push('/users/eduardo')

// 带有路径的对象
router.push({ path: '/users/eduardo' })

// 除了 path 之外,你还可以为任何路由提供 name
// 命名的路由,并加上参数,让路由建立 url
// 如果可能的话,使用 `name` 和 `params` 从自动 URL 编码中获益
// 路由将导航到路径 /user/erina
// 所有路由的命名都必须是唯一的。如果为多条路由添加相同的命名,路由器只会保留最后那一条。
router.push({ name: 'user', params: { username: 'eduardo' } })
<router-link :to="{ name: 'user', params: { username: 'erina' }}">
  User
</router-link>

// 带查询参数,结果是 /register?plan=private
router.push({ path: '/register', query: { plan: 'private' } })

// 带 hash,结果是 /about#team
router.push({ path: '/about', hash: '#team' })

// `params` 不能与 `path` 一起使用,如果提供了 path,params 会被忽略
router.push({ path: '/user', params: { username } }) // -> /user

router.push 和所有其他导航方法都会返回一个 Promise,让我们可以等到导航完成后才知道是成功还是失败。

导航横跨历史

// 向前移动一条记录,与 router.forward() 相同
router.go(1)

// 返回一条记录,与 router.back() 相同
router.go(-1)

// 前进 3 条记录
router.go(3)

// 如果没有那么多记录,静默失败
router.go(-100)
router.go(100)

router.push、router.replace 和 router.go 是window.history.pushState,window.history.replaceState 和 window.history.go 的翻版,它们模仿了 window.history 的 API。

转载请说明出处内容投诉
CSS教程_站长资源网 » vue3之声明式和编程式导航

发表评论

欢迎 访客 发表评论

一个令你着迷的主题!

查看演示 官网购买