How to jump to sub-route in vue

Vue is a popular front-end framework that uses a component-based approach to build applications. Vue router is a plug-in provided by Vue that can easily divide the application into multiple views and allow users to navigate between views. In Vue router, each view is a route, and each route can have multiple sub-routes. This article will introduce how to jump sub-routes.

1. Declare sub-routes

Declaring sub-routes in Vue router requires the use of nested routes. Use the children field in the parent route to declare child routes. For example:

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

In the above code, we declare a parent route named parent, and a child route named child. When the user accesses /parent/child, the Parent and Child components will be rendered.

2. Jump sub-route

Jump routing in Vue can use the router-link component or programmatic navigation of the $router object. When jumping sub-routes, we need to provide the complete routing path. For example, to jump to the child route in the above example, we need to provide the full route path of /parent/child.

Use router-link:

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

Use programmatic navigation:

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

In the above code, we use the $router.push method to jump routes.

3. Programmatic Navigation Passing Parameters

In practice, we often need to jump to sub-routes and pass some parameters. In Vue, we can pass parameters using the params field in programmatic navigation. For example:

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

In the above code, we passed an id parameter with a value of 1. In the sub-routing component that receives parameters, we can get the parameters through this.$route.params.

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

4. Conclusion

This article introduces how to jump sub-routes in Vue routing. We covered how to declare subroutes, how to use router-link and programmatic navigation to jump to subroutes, and how to pass parameters. Hope this article is helpful to beginners.

The above is the detailed content of How to jump to sub-route in vue. For more information, please follow other related articles on the PHP Chinese website!