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>
使用编程式导航：
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和编程式导航跳转子路由，以及如何传递参数。希望本文对初学者有所帮助。
