推荐答案
在 Nuxt.js 中，$router 对象是 Vue Router 的实例，可以通过它进行编程式导航。以下是使用 $router 进行导航的常见方法：
// www.javascriptcn.com code example
// 导航到指定路径
this.$router.push('/about')
// 导航到指定路径并传递参数
this.$router.push({ path: '/user', query: { id: '123' } })
// 导航到指定路径并传递命名路由
this.$router.push({ name: 'user', params: { id: '123' } })
// 替换当前路由，不会在历史记录中留下记录
this.$router.replace('/home')
// 前进或后退指定步数
this.$router.go(1) // 前进一步
this.$router.go(-1) // 后退一步本题详细解读
$router.push
$router.push 是 Vue Router 中最常用的导航方法。它会在历史记录中添加一条新记录，并将用户导航到指定的路径。你可以传递一个字符串路径，也可以传递一个包含路径、查询参数或命名路由的对象。
// 导航到指定路径
this.$router.push('/about')
// 导航到指定路径并传递查询参数
this.$router.push({ path: '/user', query: { id: '123' } })
// 导航到命名路由并传递参数
this.$router.push({ name: 'user', params: { id: '123' } })$router.replace
$router.replace 与 $router.push 类似，但它不会在历史记录中添加新记录，而是替换当前记录。这意味着用户无法通过浏览器的后退按钮返回到之前的页面。
// 替换当前路由
this.$router.replace('/home')$router.go
$router.go 方法允许你在历史记录中前进或后退指定的步数。正数表示前进，负数表示后退。
// 前进一步 this.$router.go(1) // 后退一步 this.$router.go(-1)
注意事项
- 在使用
$router.push或$router.replace时，如果传递的参数是一个对象，确保路径、查询参数或命名路由的格式正确。 - 如果导航的目标路径与当前路径相同，Vue Router 不会重新加载页面或触发导航守卫。
通过 $router 对象，你可以灵活地在 Nuxt.js 应用中实现编程式导航，控制用户的浏览路径和体验。