在Vue中,想要实现页面之间的跳转,我们通常需要使用Vue Router这个插件。Vue Router底层使用的是浏览器的History API,而封装了一些较为方便的API供我们使用。
在 Vue Router 中,用于导航的组件需要通过 router-link 标签来创建,而页面的展示则需要使用 router-view 标签。而导航操作则可以通过在JS代码中进行跳转,下面我们来简单介绍一下使用Vue Router push方法进行页面跳转。
// 在vue实例中,通过this.$router.push进行跳转 // 示例代码如下: this.$router.push('/blog')
可以看到,这里我们通过 $router 实例的 push 方法来进行跳转,而 push 方法的参数则是要跳转的目标路由地址。这里的'/blog'可以是在路由配置中定义的路径,也可以是一个完整的URL。比如,我们可以在一个组件中使用下面的代码进行跳转:
// 在组件内部,使用$router.push跳转 // 示例代码如下: export default { methods: { toBlog() { this.$router.push('/blog') } } }
在上述代码中,我们通过 export default 导出了一个带有 toBlog 方法的 Vue 组件。在这个方法内部,我们使用了之前介绍的 $router.push 方法进行页面跳转。需要注意的是,在Vue组件中,我们不能直接使用 $router 进行跳转,需要使用 this.$router 的方式来调用。
我们还可以通过 $router.push 方法的第一个参数传递一个包含路径和查询参数的对象。这个对象中可以包含 path、name、query、params 等属性,具体细节可以查看 Vue Router 官方文档。
// 在vue实例中,通过this.$router.push进行跳转 // 示例代码如下: this.$router.push({ path: '/blog', query: { id: 1 } })
通过上述代码示例,我们可以将路由参数传递给要跳转的页面。
Vue Router 还提供了 $router.replace 方法,使用方法与 $router.push 类似。它的作用就是在跳转时不会生成一个新的历史记录,在浏览器后退时会直接返回上一个页面,而不是返回到跳转之前的页面。
// 在vue实例中,通过this.$router.replace进行跳转 // 示例代码如下: this.$router.replace('/blog')
总结起来,Vue Router 提供了 $router.push 和 $router.replace 两个方法进行页面跳转。它们的参数包含了跳转的目标路径、查询参数等信息,可以很方便地进行导航操作。