组合式API编程式导航

213 阅读1分钟

路由参数

因为我们在 setup 里面没有访问 this,所以不能再直接访问 this.$route。作为替代使用 useRoute 函数:

复制import { useRoute } from 'vue-router'
const route = useRoute()
console.log(route.query); // 路由配置为 { path: "/cart?day=30" } 时
console.log(route.params); // 路由配置为 { path: "/cart/:day" } 时

编程式导航

因为我们没有访问 this,所以不能再直接访问 this.$router。作为替代使用 useRouter 函数:

复制import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()

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

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

// 命名的路由,并加上参数,让路由建立 url
router.push({ name: 'user', params: { username: 'eduardo' } })

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

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

const username = 'eduardo'
// 我们可以手动建立 url,但我们必须自己处理编码
router.push(`/user/${username}`) // -> /user/eduardo
// 同样
router.push({ path: `/user/${username}` }) // -> /user/eduardo
// 如果可能的话,使用 `name` 和 `params` 从自动 URL 编码中获益
router.push({ name: 'user', params: { username } }) // -> /user/eduardo
// `params` 不能与 `path` 一起使用
router.push({ path: '/user', params: { username } }) // -> /user

替换当前位置

复制router.push({ path: '/home', replace: true })
// 相当于
router.replace({ path: '/home' })

横跨历史

router.go(n)

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

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

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

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