《和小米一起学Vue.js》— 嵌套路由

一些应用程序的 UI 由多层嵌套的组件组成。在这种情况下，URL 的片段通常对应于特定的嵌套组件结构，通过 Vue Router，你可以使用嵌套路由配置来表达这种关系。

要使用嵌套路由，需要先装备要使用的子组件。 例如： UserInfo 和 Userlist

<template>
  <div>这里是用户信息页面</div>
</template>

<script>
  export default{
  }
</script>

<template>
  <div>这里是用户列表页面</div>
</template>

<script>
  export default{
  }
</script>

然后，需要在上级的组件中（User），增加一个 <router-view></router-view> 来用于展示子组件的内容。

<template>
  <div>
    <h1>这里是user页面</h1>
    <h2>当前的用户ID是:{{$route.params.uid}}</h2>

    <router-link to="ulist">用户列表</router-link> |
    <router-link to="uinfo">用户信息</router-link>
    <router-view></router-view>
  </div>
</template>

最后，需要将子页面路由信息嵌套到路由入口文件中的 User 路由中，需要在路由中配置 children 。

//使用懒加载
const UserView=()=> import('../views/User')
const UserInfo=()=> import('../views/UserInfo')
const UserList=()=> import('../views/UserList')

//配置路由
const routes = [
  {
    path: '/user/:uid',   //对应的网址路径
    name: 'user',         //对应的路由名称
    component: UserView,
    //动态导入子路由列表
    children: [
      {
        path: '',
        redirect:"uinfo" //默认打开uinfo
      },
      {
        path: 'uinfo',
        component: UserInfo,
      },
      {
        path: 'ulist',
        component: UserList,
      },
    ],
  }
]

代码下载

下载地址：  密码：p5n9