在 Vue.js 中,页面跳转通常是通过路由(Vue Router)来实现的。Vue Router 是 Vue.js 官方的路由管理器,可以实现单页应用(SPA)中的页面跳转、路由匹配和参数传递等功能。以下是几种常见的 Vue 页面跳转的方法:
标签: 在 Vue 组件的模板中,可以使用
标签来实现页面之间的跳转。
实质上会被渲染为
标签,在点击时触发路由跳转。 "/about">Go to About Page
$router
对象,可以实现编程式导航,即在 JavaScript 代码中进行页面跳转。 - // 在方法中进行页面跳转
- methods: {
- goToAboutPage() {
- this.$router.push('/about');
- }
- }
$route.params
来获取。 - <router-link :to="{ name: 'user', params: { userId: 123 }}">User Profilerouter-link>
- // 路由配置中定义命名路由
- {
- path: '/user/:id',
- name: 'user',
- component: User
- }
-
- // 使用命名路由跳转
- this.$router.push({ name: 'user', params: { id: 123 }});
以上是在 Vue.js 中实现页面跳转的几种常用方法。通过合理使用 Vue Router 的相关功能,可以实现灵活、高效的页面导