vue怎样跳转子路由-前端问答-PHP中文网

vue怎样跳转子路由

PHPz

发布： 2023-04-18 09:47:25

原创

2623人浏览过

vue是一款流行的前端框架，它使用组件化的方式构建应用程序。vue路由器是vue提供的一个插件，可以方便地将应用程序划分为多个视图，并且允许用户在视图之间进行导航。在vue路由器中，每一个视图都是一个路由，每一个路由都可以有多个子路由。本文将介绍如何跳转子路由。

声明子路由

在Vue路由器中声明子路由需要使用到嵌套路由。在父路由中使用children字段来声明子路由。例如：

const router = new VueRouter({
  routes: [
    {
      path: '/parent',
      component: Parent,
      children: [
        {
          path: 'child',
          component: Child
        }
      ]
    }
  ]
})

登录后复制

在以上代码中，我们声明了一个名为parent的父路由，和一个名为child的子路由。当用户访问/parent/child时，将会渲染Parent和Child组件。

跳转子路由

在Vue中跳转路由可以使用router-link组件或者使用$router对象的编程式导航。在跳转子路由时，我们需要提供完整的路由路径。例如，要跳转到上述示例中的子路由，我们需要提供/parent/child的完整路由路径。

使用router-link：

立即学习“前端免费学习笔记（深入）”；

<router-link to="/parent/child">跳转到子路由</router-link>

登录后复制

使用编程式导航：

豆绘AI

豆绘AI是国内领先的AI绘图与设计平台，支持照片、设计、绘画的一键生成。

485

查看详情

this.$router.push('/parent/child')

登录后复制

在以上代码中，我们使用了$router.push方法来跳转路由。

编程式导航传递参数

在实践中，我们经常需要跳转子路由并且传递一些参数。在Vue中，我们可以在编程式导航中使用params字段传递参数。例如：

this.$router.push({ path: '/parent/child', params: { id: 1 }})

登录后复制

在上述代码中，我们传递了一个id参数，值为1。在接收参数的子路由组件中，我们可以通过this.$route.params来获取参数。

export default {
  mounted() {
    console.log(this.$route.params.id) // 输出1
  }
}

登录后复制

结语

本文介绍了如何在Vue路由中跳转子路由。我们介绍了如何声明子路由、如何使用router-link和编程式导航跳转子路由，以及如何传递参数。希望本文对初学者有所帮助。

以上就是vue怎样跳转子路由的详细内容，更多请关注php中文网其它相关文章！