使用编程式导航
使用 router.push() 方法进行路由跳转，可以在其中传入一个路由对象，也可以传入一个字符串路径：
// 传入路由对象 router.push({ path: '/foo' }) // 传入字符串路径 router.push('/foo')
在路由对象中，可以通过 params 和 query 选项传递参数：
router.push({ path: '/foo', query: { bar: 'baz' } }) router.push({ name: 'foo', params: { id: 123 } })
使用声明式导航
可以在 <router-link> 标签上使用 to 属性实现声明式导航。和编程式导航一样，可以传入一个字符串路径或路由对象，同时也可以通过 params 和 query 选项传递参数：
<!-- 传入字符串路径 --> <router-link to="/foo">Go to Foo</router-link> <!-- 传入路由对象 --> <router-link :to="{ path: '/foo' }">Go to Foo</router-link> <!-- 传递参数 --> <router-link :to="{ name: 'foo', params: { id: 123 } }">Go to Foo</router-link>
在组件内使用 $router 和 $route 对象
在 Vue.js 组件中，可以通过 $router 和 $route 对象实现跳转和传参。其中，$router 对象用于导航，而 $route 对象用于提取当前路由的信息，包括参数、查询等。可以通过 $router 对象的 push() 方法进行跳转：
// 在组件内部提取参数 this.$route.params.id // 在组件内部提取查询参数 this.$route.query.foo // 跳转到指定路由 this.$router.push('/foo') this.$router.push({ path: '/foo', query: { bar: 'baz' } })
总之，使用 Vue Router 可以通过编程式导航、声明式导航、组件内部导航等方式实现路由跳转和参数传递。
