路由参数
因为我们在 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)