Vue 3 中,子路由的配置

// router/index.js  
import { createRouter, createWebHistory } from 'vue-router';  
import ParentComponent from '../components/ParentComponent.vue';  
import ChildComponent1 from '../components/ChildComponent1.vue';  
import ChildComponent2 from '../components/ChildComponent2.vue';  
  
const routes = [  
  {  
    path: '/parent',  
    component: ParentComponent,  
    children: [  
      {  
        path: 'child1',  
        component: ChildComponent1  
      },  
      {  
        path: 'child2',  
        component: ChildComponent2  
      }  
    ]  
  }  
];  
  
const router = createRouter({  
  history: createWebHistory(),  
  routes  
});  
  
export default router;

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue.js 支持通过嵌套路由来实现复杂的页面结构和导航。路由是指在父路由下的一组路由,可以在父路由对应的组件使用 `<router-view>` 标签来显示路由对应的组件。 在 Vue.js 配置路由非常简单,只需要在父路由对象定义一个 children 数组,该数组包含多个路由对象,每个路由对象都需要定义 path、name、component 等属性,例如: ``` const routes = [ { path: '/parent', component: Parent, children: [ { path: 'child1', name: 'Child1', component: Child1 }, { path: 'child2', name: 'Child2', component: Child2 } ] } ] ``` 在上面的代码,我们定义了一个名为 `Parent` 的父组件,它包含了两个路由 `Child1` 和 `Child2`,它们的路径分别为 `/parent/child1` 和 `/parent/child2`。当访问 `/parent/child1` 时,Vue.js 会先显示 `Parent` 组件,然后在 `Parent` 组件的 `<router-view>` 标签显示 `Child1` 组件。 需要注意的是,路由的路径不需要带上父路由的路径,它们的路径是相对于父路由的路径来定义的。在配置路由时,我们可以使用相对路径或绝对路径来定义路由的路径,例如: ``` const routes = [ { path: '/parent', component: Parent, children: [ { path: 'child1', name: 'Child1', component: Child1 }, { path: '/child2', name: 'Child2', component: Child2 } ] } ] ``` 在上面的代码,`Child1` 的路径是相对于 `Parent` 的路径来定义的,而 `Child2` 的路径是绝对路径,它不受父路由路径的影响。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值