要在 Vue.js 中定义子路由：在 Vue Router 实例中定义嵌套路径。在组件中使用 router-view 元素渲染子路由。通过 $route 对象访问子路由参数。可指定名称以简化导航。通过 router-link 组件或 $router 对象进行导航。
如何在 Vue.js 中定义子路由
在 Vue.js 中，子路由是嵌套在父路由内的路由。这允许您创建具有分层结构的应用程序，其中每个路由都对应于特定部分或功能。
如何定义子路由：
-
在 Vue Router 实例中定义嵌套路径：
立即学习“前端免费学习笔记（深入）”；
const router = new VueRouter({ routes: [ { path: '/parent', component: ParentComponent, children: [ { path: 'child1', component: ChildComponent1 }, { path: 'child2', component: ChildComponent2 } ] } ] }) -
使用组件中的
router-view元素渲染子路由：在子路由对应的组件中，使用
router-view元素渲染动态内容： -
访问子路由参数：
在子路由组件中，可以使用
$route对象访问子路由参数：export default { data() { return { paramValue: this.$route.params.paramName } } } -
命名子路由：
为了简化导航，您可以为子路由指定名称：
const router = new VueRouter({ routes: [ { path: '/parent', component: ParentComponent, children: [ { name: 'child1', path: 'child1', component: ChildComponent1 }, { name: 'child2', path: 'child2', component: ChildComponent2 } ] } ] }) -
导航到子路由：
使用
router-link组件或$router对象的push()或replace()方法导航到子路由：子路由 1 this.$router.push('/parent/child2')
