vue-router跳转和跳转传参方法

使用编程式导航

使用 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 可以通过编程式导航、声明式导航、组件内部导航等方式实现路由跳转和参数传递。